1

我正在使用Vue.js 2.5.17我有两个组件，App（父）和 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;
        }
      },
    },
  });

树节点模板

<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));
        }
      },
    },
});

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

我面临的问题是，每当我的 items 对象深处的属性发生更改（更具体地说，节点内数据对象的示例属性）时，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' });

有小费吗 ？谢谢！

编辑：数据始终仅在父（App）组件中更改。

4

0 回答 0