Как отобразить второй массив внутри вычисляемого свойства в vue.js

Я хочу отобразить второй массив внутри вычисляемого свойства, но только если установлен флажок. В противном случае должен отображаться только первый список.

Мне удалось заставить свой первый список работать с моим кодом, и он отображается так, как должен, у меня также есть метод, который позволяет сортировать список в алфавитном порядке (это то, что я называю категориями).

Как мне выполнить слияние с другим массивом, если значение моего флажка истинно?

Вот код

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;
   }
 }

vue.js computed-properties
person Emilia    schedule 14.06.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

хорошо, так что у меня было все это, и теперь я все понял. Итак, я изменил свой код на этот, и он сработал, это внутри моего вычисляемого свойства:

 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;
   }
 }
person Emilia    schedule 14.06.2019