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

llmtgqce  于 2023-11-21  发布在  Vue.js
关注(0)|答案(1)|浏览(182)

我有一个问题,这段代码:我试图使一个树查看器从一个对象,它的工作很好,直到当一个值是完全相同的另一个值,它克隆de键,它取代相同的关键字的值是相同的。
在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


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

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')

atmip9wb

atmip9wb1#

问题是Object.keys(this.$parent.item).find(key => this.$parent.item[key] === this.item);将找到第一个匹配value的键
简单的修复,你需要传递“index”作为一个prop(因为对象中的index是一个字符串,而itemtree-item中的Object)
我使用name作为prop,但我并不喜欢这样:p无法为这个prop想出一个更好的名称-但这并不是真正需要担心的事情

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

字符串
注意:保留:key="index",因为这对v-for至关重要
并在计算的key:中返回this.name

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

相关问题