Vue js 3 - 当多个值相似时，我的 Json 或对象树查看器有重复的键错误

Question

我对这段代码有一个问题：我试图从一个对象创建一个树查看器，它工作得很好，直到一个值与另一个值完全相同时，它克隆键并替换该值所在的相同键一样的。

在 CodePen 上：https://codepen.io/onigetoc/pen/rNPeQag?editors=1010

这个物体：

[
    {
        "userId": 1,
        "id": 1,
        "title": "delectus aut autem",
        "description": "delectus aut autem"
    },
    {
        "userId": 1,
        "id": 2,
        "title": "quis ut nam facilis et officia qui",
        "description": "et porro tempora"
    },
]

在我的树视图中给我：

[-]
userId:1
userId:1
title:delectus aut autem
title:delectus aut autem
[-]
userId:1
id:2
title:quis ut nam facilis et officia qui
description:et porro tempora

我们可以看到键 userId 和 title 是重复的，因为它们具有相同的值。 第二部分没问题，因为没有相同的值。

HTML部分：

<!-- item template -->
<script type="text/x-template" id="item-template">
  <li>
    <span :class="{bold: isFolder}" @click="toggle">
      <span class="key" v-if="!isFolder" @click="toggleKey">{{ key }}:</span>
      <span class="value" v-if="!isFolder">{{ value }}</span>
      <span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span>
    </span>
    <ul v-show="isOpen" v-if="isFolder">
      <tree-item
        class="item"
        v-for="(child, index) in item"
        :key="index"
        :item="child"
      ></tree-item>
    </ul>
  </li>
</script>

<p>(You can double click on an item to turn it into a folder.)</p>

<!-- the demo root element -->
<ul class="view-list" id="connect-list">
  <tree-item class="item" :item="treeData" @make-folder="makeFolder" @add-item="addItem"></tree-item>
</ul>

Javascript部分：

<!-- demo data -->
// https://jsonplaceholder.typicode.com/users
var treeData = [
    {
        "userId": 1,
        "id": 1,
        "title": "delectus aut autem",
        "description": "delectus aut autem"
    },
    {
        "userId": 1,
        "id": 2,
        "title": "quis ut nam facilis et officia qui",
        "description": "et porro tempora"
    },
];

const app = Vue.createApp({
  data: function() {
    return {
      treeData: treeData
    }
  },

methods: {
  makeFolder: function(item) {
    Vue.set(item, 'newFolder', {});
    this.addItem(item.newFolder);
  },
  addItem: function(item) {
    Vue.set(item, 'newItem', 'new stuff');
  }
}
})

app.component("tree-item", {
  template: '#item-template',
  props: {
    item: Object
  },
  data: function() {
    return {
      isOpen: true // default was false
    };
  },
  computed: {
    isFolder: function() {
      return typeof this.item === 'object' && this.item !== null;
    },
    key: function() {
      if (typeof this.item === 'object' && this.item !== null) {
        return '';
      } else {
        return Object.keys(this.$parent.item).find(key => this.$parent.item[key] === this.item);
      }
    },
    value: function() {
      if (typeof this.item === 'object' && this.item !== null) {
        return '';
      } else {
        return this.item;
      }
    }
  },
  methods: {
    toggle: function() {
      if (this.isFolder) {
        this.isOpen = !this.isOpen;
      }
    },
    toggleKey: function(event) {
      event.target.classList.toggle("bgcolor");
    }
  }
})

  app.mount('#connect-list')

Answer 1

修复确实很简单，您需要将“index”作为 prop 传递（因为对象中的索引是一个字符串，而

item

是

tree-item

中的对象）

  <tree-item
    class="item"
    v-for="(child, index) in item"
    :key="index"
    :name="index"
    :item="child"
  ></tree-item>

并在计算的

this.name

中返回

key:

key: function() {
      if (typeof this.item === 'object' && this.item !== null) {
        return '';
      } else {
        return this.name;
      }
    },