Question

我已经将这个微型应用程序中的输入绑定到一个名为currentCat的计算属性，该属性同时具有getter和setter方法。使用console.log，可以看到cats数组已经过属性更新，但是所有更改都没有反映在呈现的html中。

这是应用程序的HTML：

<div id="app">
  <ul>
    <li v-for="cat in cats">{{ cat }}</li>
  </ul>
  <div>{{ currentCat }}</div>
  <input type="text" v-model="currentCat">
</div>

这是JavaScript：

let app = new Vue({
  el: "#app",
  data: {
    currentCatIndex: 0,
    cats: ["Bob", "Tom", "Cat", "Dog"]
  },
  computed: {
    currentCat: {
      get() {
        return this.cats[this.currentCatIndex];
      },
      set(value) {
        console.log(value, this.cats[this.currentCatIndex]);
        this.cats[this.currentCatIndex] = value;
        console.log(this.cats[this.currentCatIndex]);
      }
    }
  }
});

运行计算所得的属性的设置程序时，HTML中的列表和div不会自动更新吗？

Answer 1

在执行操作时，Vue无法检测到对阵列的更改：

const data = yield all([
    yield call(PCPNAME_QUERY), // where PCPNAME_QUERY is a saga
    yield call(PCPREGIONNAME_QUERY),
    yield call(PCPGROUPNAME_QUERY),
    yield call(SERVICETYPE_QUERY),
    yield call(PCPPRIMARYSPECIALTY_QUERY),
])

console.log('DATA >>>', data)

请使用以下选项之一：

this.cats[this.currentCatIndex] = value;

请参见the docs。

Vue.js应用程序未按预期更新视图

1 个答案: