Сортировка массива js

Question

Пытаюсь сделать сортировку по селектбоксу. Если массив содержит один из item, хотел бы видеть результат - вывод имени, который содержит в массиве этот item. Например, в селекте выбираем item 1, вывести должен это: first, fourth

Поскажите пож-та с решением...Благодарю

new Vue({
  el: '#app',
  data: {
    selected: '',
    options: ['item 1', 'item 2', 'item 3', 'item 4'],
    items: [{
        group: ['item 1', 'item 3'],
        name: 'first',
        id: 0
      },
      {
        group: ['item 2'],
        name: 'second',
        id: 1
      },
      {
        group: ['item 3'],
        name: 'third',
        id: 2
      },
      {
        group: ['item 4', 'item 1'],
        name: 'fourth',
        id: 3
      }
    ]
  },
  watch: {
    selected: function(val) {
      this.selected = val;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="app">
  <select :selected="selected" >
    <option disabled value="">Выберите один из вариантов</option>
    <option>item 1</option>
    <option>item 2</option>
    <option>item 3</option>
    <option>item 4</option>
  </select>
  <span>Выбрано: {{  }}</span>
  <div class="flex items-center" v-for="item in items" :key="item.id">
    <span>{{ item.group }}</span>
  </div>
</div>

Answer 1

new Vue({
  el: '#app',
  data: {
    selected: '',
    options: ['item 1', 'item 2', 'item 3', 'item 4'],
    items: [{
        group: ['item 1', 'item 3'],
        name: 'first',
        id: 0
      },
      {
        group: ['item 2'],
        name: 'second',
        id: 1
      },
      {
        group: ['item 3'],
        name: 'third',
        id: 2
      },
      {
        group: ['item 4', 'item 1'],
        name: 'fourth',
        id: 3
      }
    ]
  },
  watch: {
    selected: function(val) {
      this.selected = val;
    }
  },
computed: {
  value(){
    const {selected, items} = this;
    return items.filter(i => i.group.includes(selected)).map(a => a.name).join(' ');
 }
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="app">
  <select :selected="selected" v-model="selected">
    <option disabled value="">Выберите один из вариантов</option>
    <option>item 1</option>
    <option>item 2</option>
    <option>item 3</option>
    <option>item 4</option>
  </select>
  <span>Выбрано: {{ value }}</span>
  <div class="flex items-center" v-for="item in items" :key="item.id">
    <span>{{ item.group }}</span>
  </div>
</div>

БЛОГ НА HUSL

Сортировка массива js

Ответы (1 шт):