Question

我需要弄清楚为什么更改的属性不会在Vue中触发手表。

我有两个组件Parent和Child。

Child有1个Prop（item），item有4个属性：id，text，isImportant，isCool。

Parent有两个列表，使用两个返回数组的计算属性填充，一个是项目的“isImportant”== TRUE，另一个是“isImportant”为FALSE。

在Child中，isImportant和isCool都绑定输入[type = checkbox]元素。

我有一个手表（深度）设置来响应孩子项目道具的变化。

更改“isCool”会触发手表，而“isImportant”则不会。

更改isImportant会更新集合并更新属性，但不会触发“监视”。

它似乎与计算属性有关但不确定原因？

https://jsfiddle.net/dclaysmith/y54b0mrq/

Vue.component('todo', {
    props: {
        item: Object
    },
    template: `
        <label>
            {{ item.text }}
          <input type="checkbox"
            v-model="item.isImportant">
            Is Important?
          <input type="checkbox"
            v-model="item.isTicked">
            Is Cool?
      </label>`,
    watch: {
      item: {
        handler: function (a, b) {
            alert('Changed!')
        },
        deep: true
      },
      'item.isImportant': function (a, b) {
        alert('Changed!')
      }
    },
})

new Vue({
    el: '#app',
    template: `
<div id="app">
  <h2>Important:</h2>
  <ol>
    <li v-for="item in important">
      <todo :item="item" :key="item.id"></todo>
    </li>
  </ol>
  <br>
  <h2>Not Important:</h2>
  <ol>
    <li v-for="item in notImportant">
      <todo :item="item" :key="item.id"></todo>
    </li>
  </ol>
</div>
    `,
    data: {
      todos: [
        { id: 1, text: "Learn JavaScript", isImportant: false, isTicked: false },
        { id: 2, text: "Learn Vue", isImportant: true, isTicked: false },
        { id: 3, text: "Play around in JSFiddle", isImportant: true, isTicked: false },
        { id: 4, text: "Build something awesome", isImportant: true, isTicked: false }
      ]
        },
    computed: {
      important: function () {
        return this.todos.filter(function(todo) {
          return (todo.isImportant == true);
        });
      },
      notImportant: function () {
        return this.todos.filter(function(todo) {
          return (todo.isImportant != true);
        });
      }
    }
})

Answer 1

组件未捕获对isImportant的更改的原因是，当您更改isImportant时，组件将被删除，因为todo项目从一个列表移动到其他

如果您只有一个所有待办事项列表（<li v-for="item in todos">），则两个侦听器都会触发。

为什么此属性的更改不会触发Vuejs中的手表？

1 个答案: