1

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

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 实现了它的反应性，因此不需要其他任何东西。缺少什么？

任何帮助表示赞赏。

亲切的问候。

4

2 回答 2

1

您是否收到来自 ajax 请求的结果？如果是这样，是否在您的 div 中被监听？如果没有，请尝试更改：

this.items = response.items;

至

this.page.items = response.items

在上面的代码中，您正在更新 vue vm 中未声明的属性

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

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

干杯...

于 2016-12-13T14:25:12.097 回答
0

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

从服务器获取项目。当我最初从第一个服务器响应中设置此道具时添加了已检查的属性时，它运行良好。

这是正确的过程吗？？

于 2016-12-13T12:31:53.493 回答