Question

我想在我的计算属性内显示第二个数组，但前提是必须选中一个复选框。否则，仅显示第一个列表。

我已经设法使我的拳头列表与我的代码一起使用，并且可以按应有的方式显示，还有一种方法可以使列表按顺序进行排序（这就是我所说的类别）。

如果我的复选框的值为true，如何在另一个数组中合并？

这是一些代码

data: function() {
   return {
     checked: false,
     fruitList: [ //Fist list
       "Apple",
       "Grapes",
       "Mango",
       "Oranges",
       "Banana",
       "Dragon fruit",
       "Pinapple",
       "Coconut",
       "Strawberry"
     ],
      vegetableList:[ //Second list, should only display if checkbox is true
      "cucumber",
       "tomato",
       "onion"
       ]
    };
},
methods:{
return{
 sorted(list) {
     return list.sort();
   }
}
},
computed: {
   categorizedWords() {
     let map = {};
      this.fruitList.forEach(word => {
       let key = word.charAt(0).toUpperCase();
       let list = map[key];
       if (list === undefined) {
         list = [];
         map[key] = this.sortedList(list);
       }
       list.push(word);
     });

     var sortedCategories = this.sortedList(Object.keys(map));
     var sortedMap = sortedCategories.map(category => {
       return { category: category, word: map[category] };
     });
     return sortedMap;
   }
 }

Answer 1

好的，所以我已经拥有了一切，现在我已经弄清楚了。所以我将代码更改为此，并且它起作用了，这在我的计算属性内：

 computed: {
   categorizedWords() {
     let map = {};
     let isCheched = this.checked;

      let allGreens = this.fruitList;

      if (isChecked === true) {
        allGreens = allGreens.concat(this.vegetableList);
      }

      allGreens.forEach(word => {
       let key = word.charAt(0).toUpperCase();
       let list = map[key];
       if (list === undefined) {
         list = [];
         map[key] = this.sortedList(list);
       }
       list.push(word);
     });

     var sortedCategories = this.sortedList(Object.keys(map));
     var sortedMap = sortedCategories.map(category => {
       return { category: category, word: map[category] };
     });
     return sortedMap;
   }
 }

如何在vue.js的计算属性内显示第二个数组

1 个答案: