Question

我正在尝试将新项目添加到使用Vuetify布局创建的树视图中。源代码在这里：https://codepen.io/luizarusso/pen/YzPqNpy

  methods: {    
    addChildFile(item) {
      if (!item.children) {
        this.$set(item, "children", []);
      }

      const name = 'kkk';
      const file = 'pdf';
      item.children.push({
        name,
        file
      });
    },
    addChildFolder(item) {
      if (!item.children) {
        this.$set(item, "children", []);
      }

      const name = 'kkk';
      const id = this.nextId++;
      item.children.push({
        id,
        name
      });
    },
}

效果很好！但是我需要提供一个对话框，用户应在其中选择要上传的文件或插入文件夹名称。此时，当我尝试在子节点中插入时，我松开了要插入新文件/文件夹的节点的索引。

这是我最近得到的：https://codepen.io/luizarusso/pen/dyPORda

  methods: {    
    addFile (item) {
      this.editedIndex = this.items.indexOf(item)
      this.editedItem = Object.assign({}, item)
      this.dialog = true
    },

    addFolder (item) {
      this.editedIndex = this.items.indexOf(item)
      this.editedItem = Object.assign({}, item)
      this.dialog2 = true
    },

    addChildFile() {
      if (!this.editedItem.children) {
        this.$set(this.editedItem, "children", []);
      }
      const id = this.nextId++;
      const name = this.fd[0].name;
      const file = 'pdf';
      this.editedItem.children.push({
        id,
        name,
        file
      });
      this.dialog = false
    },

    addChildFolder() {
      if (!this.editedItem.children) {
        this.$set(this.editedItem, "children", []);
      }

      const name = this.nomePasta;
      const id = this.nextId++;
      this.editedItem.children.push({
        id,
        name
      });
      this.dialog2 = false
    },
  }

是否有保持绑定的方法？有任何想法吗？非常感谢！

编辑： Djip的答案解决了这个问题。如果有人想看，这里是解决方案的源代码：https://codepen.io/luizarusso/pen/MWYbZVP 正如他解释的那样，您只需要使用=符号将editedItem变量设置为正确的项目，而不是它的副本（使用Object.assign时）

    addFile (item) {
      this.editedIndex = this.items.indexOf(item)
      this.editedItem = item
      this.dialog = true
    },

    addFolder (item) {
      this.editedIndex = this.items.indexOf(item)
      this.editedItem = item
      this.dialog2 = true
    },

干杯！

Answer 1

问题是您正在使用Object.assign({}, item);。 Object.assign的作用是复制对象并删除引用。

因此，您应该将代码更改为以下内容：

methods: {    
    addFile (item) {
      this.editedIndex = this.items.indexOf(item)
      this.editedItem = item
      this.dialog = true
    },

    addFolder (item) {
      this.editedIndex = this.items.indexOf(item)
      this.editedItem = item
      this.dialog2 = true
    },

通过这种方式，您可以将editedItem变量设置为正确的项目，而不是其副本。

将新项目/文件夹添加到TreeView-VueJS + Vuetify

1 个答案: