Question

我正在使用Vue.js 2.5.17，我有两个组件，即App（父级）和TreeNode（子级），它们显示来自深层嵌套对象的项目的树形结构。树中的每个节点都有一个TreeNode组件，它是一个递归组件。

TreeNode组件

const TreeNode = Vue.component('TreeNode', {
    name: 'TreeNode',
    template: '#treenode',
    props: {
      model: Object,
    },
    data() {
      return {
        open: false,
      };
    },
    computed: {
      isExpandable() {
        return this.model.children &&
          this.model.children.length;
      },
    },
    methods: {
      toggle() {
        if (this.isExpandable) {
          this.open = !this.open;
        }
      },
    },
  });

TreeNode模板

<script type="text/x-template" id="treenode">
  <li>
    <input type="checkbox" :id="model.name" style="display:none;"/>
    <label :for="model.name" style="color:gray;" @click="toggle">
      {{ model.name }}
      {{ model.data.example }}
    </label>
    <ul v-show="open" v-if="isExpandable">
      <TreeNode
        class="item"
        v-for="(model, index) in model.children"
        :key="index"
        :model="model">
      </TreeNode>
    </ul>
  </li>
</script>

应用程序组件模板

<script type="text/x-template" id="oulist">
  <div>
    <div id="unitsTable" class="row filterlist treelist b_widget2" style="width:85%;">
      <div class="css-treeview">
          <TreeNode
            class="item"
            :model="items">
          </TreeNode>
      </div>
    </div>
</script>

应用程序组件

const App = Vue.component('App', {
    template: '#oulist',
    components: {
      TreeNode,
    },
    data() {
      return {
        items: { 
          name: 'item1',
          data: { example: '1' },
          children: [
            { 
              name: 'item11',
              children: [],
              data: { example: '1' },
            },
            {
              name: 'item12',
              children: [
                { name: 'item121', children: [], data: { example: '1' } },
                { name: 'item122', children: [], data: { example: '1' } },
              ],
              data: { example: '1' },
            },
          ],
        },
      };
    },
    methods: {
      updateItem(currNode, name, data) {
        if (currNode.name === name) {
          Object.assign(currNode.data, data);
          this.items = Object.assign({}, this.items); // tried to create a new object here and overwrite it, but it didn't help
          return;
        }
        if (currNode.children) {
          currNode.children.forEach(c => this.updateItem(c, name, data));
        }
      },
    },
});

上面发布的对象只是一个例子，我的实际对象具有更多的嵌套级别和每个级别的项目。

我面临的问题是，只要更改了我item对象深处的属性（更具体地说，就是节点内数据对象的example属性），就不会更新DOM。我通读了有关反应的注意事项，发现默认情况下添加新属性不是反应性的，但是我不是在这里添加新属性，而只是更改现有属性。

更新来自树节点的数据时，我遍历对象以找到正确的节点并按如下所示更新其属性：

updateItem(currNode, name, data) {
  if (currNode.name === name) {
    Object.assign(currNode.data, data);
    this.items = Object.assign({}, this.items); // tried to create a new object here and overwrite it, but it didn't help
    return;
  }
  if (currNode.children) {
    currNode.children.forEach(c => this.updateItem(c, name, data));
  }
},

this.updateItem(this.items, 'item121', { example: 'newVal' });

任何提示？谢谢！

编辑：始终仅在父（应用程序）组件中更改数据。

复杂对象的vuejs反应性

0 个答案: