Question

我是vue.js的新手。我开始迁移我的angularjs应用程序。我使用vue cli生成一个新的simple-webpack项目。这将创建一个新的webpack + vueLoader项目。一切顺利，但现在我有一个问题。在我的@click事件中，我更改了部分Vue实例数据，但我无法在UI上看到它。我可以通过Vue dev工具看到实例正确更新。

export default{
    data() {
      return {
         page: { items: null}
      }
    };

                        <div v-for="item in items" class="row-margin">
                            {{item.checked}}
                            <input type="checkbox" v-model="item.checked"><span>{{item.title}}</span>
                        </div>

我更新了我的ajax成功回调中的项目：

this.items = response.items;

我知道vuejs使用getter实现其反应性，因此不需要任何其他东西。什么是缺失的部分？

任何帮助表示感谢。

亲切的问候。

Answer 1

您是否收到了ajax请求的结果？如果是这样，你的div正在听吗？如果没有，请尝试更改：

this.items = response.items;

<强> TO

this.page.items = response.items

在上面的代码中，您正在更新vue vm

中的未声明属性

来自Vue.js #data https://vuejs.org/v2/api/#data

Vue实例的数据对象。 Vue将递归地将其属性转换为getter / setter以使其“被动”。一旦观察到，您就不能再向根数据对象添加反应属性。因此，建议在创建实例之前预先声明所有根级反应属性。

干杯...

Answer 2

items数组中的项目最初没有其checked属性。我在第二次ajax调用时设置它的值时动态添加它。

从服务器获取项目。当我最初从第一个服务器响应设置此prop时添加了checked属性，它完美地工作。

是正确的过程??

在@click方法

2 个答案: