Блог

Главная - Вопросы по программированию - Как отсортировать массив по условиям в Vuejs?

Как отсортировать массив по условиям в Vuejs?

#javascript #vue.js

#javascript #vue.js

Вопрос:

 var example1 = new Vue({
  el: '#example-1',
  data: {
    // sort: item,
    items: [{
        price: '1',
        name: 'vv'
      },
      {
        price: '22',
        name: 'vv'
      },
      {
        price: '55',
        name: 'vv'
      },
      {
        price: '77',
        name: 'vv'
      },
      {
        price: '123',
        name: 'vv'
      },
      {
        price: '53',
        name: 'vv'
      },
    ]
  },
  methods: {
    sortBy(arr, key) {
      return arr.sort(function(a, b) {
        if (a[key] < b[key]) return -1
        if (a[key] > b[key]) return 1
        return 0
      })
    },
  }
}) 
 <!-- v-for - sort array by name and price -->
<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }} {{ item.name }}
  </li>
</ul>


<hr />
<div class="bbb">
  <button @click="sortbyname">name</buttton><br/>
<button @click="sortbyname">message</buttton>
</div>

Как отсортировать массив по названию и цене в Vuejs?

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

Комментарии:

1. почему ваша цена является строкой? Это должно быть число.

Ответ №1:

Вы могли бы использовать computed свойства.

Логические

  • Зациклите массив с вычисляемым свойством.
  • Обновите ключ для сортировки при нажатии кнопки, что приведет к повторному выполнению вычисляемого свойства.

Вы не должны использовать повторяющиеся вычисляемые свойства. Вся ваша логика перечисления должна выполняться одним вычисляемым методом, как показано ниже

 var example1 = new Vue({
  el: '#example-1',
  data: {
    // sort: item,
    sortKey: 'name',
    checked: false,
    searchString: "",
    items: [
      { price: '1', name: 'mm' },
      { price: '22', name: 'aa' },
      { price: '55', name: 'dd' },
      { price: '77', name: 'gg' },
      { price: '123', name: 'kk' },
      { price: '53', name: 'mn' },
    ]
  },
  computed: {
    sortedItems: function () {
      let searchString = this.searchString;
      const sortedArray = this.items.sort((a, b) => {
        if (a[this.sortKey] < b[this.sortKey]) return -1
        if (a[this.sortKey] > b[this.sortKey]) return 1
        return 0
      });
      if (!searchString) { 
        return sortedArray;
      } else {
        searchString = searchString.trim().toLowerCase();
        const search_array = sortedArray.filter((item) => {
          if (item.name.toLowerCase().indexOf(searchString) !== -1) {
            return item;
          }
        });
        return search_array;
      }
    },
  }
}) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<div id="example-1">
  <ul>
    <input type="text" v-model="searchString" placeholder="Filter" />
    <p>sortKey = {{sortKey}}</p>
    <li v-for="item in sortedItems">
      <input class="checkbox-align" type="checkbox" :value="item.name" id="productname" v-model="item.checked" />
      {{ item.price }} - {{ item.name }}
    </li>
  </ul>
  <div class="cecont" v-if="!checked">
    <p>text content</p>
  </div>
  <hr />
  <div class="bbb">
    <button @click="sortKey = 'name'">name</buttton><br />
      <button @click="sortKey = 'price'">price</buttton>
  </div>
</div>

Комментарии:

1. Почему вы используете 2 sortedItems вычисляемых свойства?

2. @Sundar Вы не должны использовать повторяющиеся вычисляемые свойства. Вся ваша логика перечисления должна выполняться одним вычисляемым методом. Я обновил свою скрипку

Метки: