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

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

我有一个问题,这段代码:我试图使一个树查看器从一个对象,它的工作很好,直到当一个值是完全相同的另一个值,它克隆de键,它取代相同的关键字的值是相同的。
在CodePen上:https://codepen.io/onigetoc/pen/rNPeQag?editors=1010

本对象:

  1. [
  2. {
  3. "userId": 1,
  4. "id": 1,
  5. "title": "delectus aut autem",
  6. "description": "delectus aut autem"
  7. },
  8. {
  9. "userId": 1,
  10. "id": 2,
  11. "title": "quis ut nam facilis et officia qui",
  12. "description": "et porro tempora"
  13. },
  14. ]

字符串

在我的树视图中给予我:

  1. [-]
  2. userId:1
  3. userId:1
  4. title:delectus aut autem
  5. title:delectus aut autem
  6. [-]
  7. userId:1
  8. id:2
  9. title:quis ut nam facilis et officia qui
  10. description:et porro tempora


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

HTML部分:

  1. <!-- item template -->
  2. <script type="text/x-template" id="item-template">
  3. <li>
  4. <span :class="{bold: isFolder}" @click="toggle">
  5. <span class="key" v-if="!isFolder" @click="toggleKey">{{ key }}:</span>
  6. <span class="value" v-if="!isFolder">{{ value }}</span>
  7. <span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span>
  8. </span>
  9. <ul v-show="isOpen" v-if="isFolder">
  10. <tree-item
  11. class="item"
  12. v-for="(child, index) in item"
  13. :key="index"
  14. :item="child"
  15. ></tree-item>
  16. </ul>
  17. </li>
  18. </script>
  19. <p>(You can double click on an item to turn it into a folder.)</p>
  20. <!-- the demo root element -->
  21. <ul class="view-list" id="connect-list">
  22. <tree-item class="item" :item="treeData" @make-folder="makeFolder" @add-item="addItem"></tree-item>
  23. </ul>

JavaScript部分:

  1. <!-- demo data -->
  2. // https://jsonplaceholder.typicode.com/users
  3. var treeData = [
  4. {
  5. "userId": 1,
  6. "id": 1,
  7. "title": "delectus aut autem",
  8. "description": "delectus aut autem"
  9. },
  10. {
  11. "userId": 1,
  12. "id": 2,
  13. "title": "quis ut nam facilis et officia qui",
  14. "description": "et porro tempora"
  15. },
  16. ];
  17. const app = Vue.createApp({
  18. data: function() {
  19. return {
  20. treeData: treeData
  21. }
  22. },
  23. methods: {
  24. makeFolder: function(item) {
  25. Vue.set(item, 'newFolder', {});
  26. this.addItem(item.newFolder);
  27. },
  28. addItem: function(item) {
  29. Vue.set(item, 'newItem', 'new stuff');
  30. }
  31. }
  32. })
  33. app.component("tree-item", {
  34. template: '#item-template',
  35. props: {
  36. item: Object
  37. },
  38. data: function() {
  39. return {
  40. isOpen: true // default was false
  41. };
  42. },
  43. computed: {
  44. isFolder: function() {
  45. return typeof this.item === 'object' && this.item !== null;
  46. },
  47. key: function() {
  48. if (typeof this.item === 'object' && this.item !== null) {
  49. return '';
  50. } else {
  51. return Object.keys(this.$parent.item).find(key => this.$parent.item[key] === this.item);
  52. }
  53. },
  54. value: function() {
  55. if (typeof this.item === 'object' && this.item !== null) {
  56. return '';
  57. } else {
  58. return this.item;
  59. }
  60. }
  61. },
  62. methods: {
  63. toggle: function() {
  64. if (this.isFolder) {
  65. this.isOpen = !this.isOpen;
  66. }
  67. },
  68. toggleKey: function(event) {
  69. event.target.classList.toggle("bgcolor");
  70. }
  71. }
  72. })
  73. 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想出一个更好的名称-但这并不是真正需要担心的事情

  1. <tree-item
  2. class="item"
  3. v-for="(child, index) in item"
  4. :key="index"
  5. :name="index"
  6. :item="child"
  7. ></tree-item>

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

  1. key: function() {
  2. if (typeof this.item === 'object' && this.item !== null) {
  3. return '';
  4. } else {
  5. return this.name;
  6. }
  7. },

展开查看全部

相关问题