Как изменить данные компонента в соответствии со свойством, переданным этому компоненту

Question

Я пытаюсь создать компонент таблицы в vue, который изменит порядок в соответствии со свойством, переданным этому компоненту:

sort: {
      type: String,
      default: "desc",
      description: "Table data order"
    }

, если я передам здесь как c Я хочу, чтобы строки были в обратном порядке, например: des c - [1,2,3] как c - [3,2,1] Итак, я только что добавил функцию, которая изменяет порядок массива в состоянии data: (вот откуда я получаю все данные для строк)

data: {
      type: Array,
      default: () => [],
      description: "Table data"
    }

и это на самом деле работает, но я не могу избавиться от ощущения, что я что-то сделал неправильно, и я бы нравится видеть ваши мысли и решения. Заранее спасибо, весь код компонента ниже.

<template>
  <table>
    <thead>
      <tr>
        <slot name="columns" :columns="columns">
          <th v-for="column in columns" :key="column">{{ column }}</th>
        </slot>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in data" :key="index">
        <slot :row="item" :index="index">
          <td
            v-for="(column, index) in colsWithValue(item)"
            :key="index"
          >{{ itemValue(item, column) }}</td>
        </slot>
      </tr>
    </tbody>
  </table>
</template>
<script>
export default {
  name: "base-table",
  props: {
    columns: {
      type: Array,
      default: () => [],
      description: "Table columns"
    },
    data: {
      type: Array,
      default: () => [],
      description: "Table data"
    },
    sort: {
      type: String,
      default: "desc",
      description: "Table data order"
    }
  },
  computed: {
    tableClass() {
      return this.type && `table-${this.type}`;
    },
    colsWithValue() {
      return row => {
        return this.columns.filter(column => this.hasValue(row, column));
      };
    }
  },
   methods: {
    hasValue(item, column) {
      return item[column.toLowerCase()] !== "undefined";
    },
    itemValue(item, column) {
      return item[column.toLowerCase()];
    },
    sortDataAsc(){
      if(this.sort === "asc"){
      this.data = this.data.reverse();
    }
    }
  },
  created(){
    this.sortDataAsc();
  }
};
</script>

Answer 1

Если вы не уверены, что это лучшее решение, вы можете проверить документацию об этом «Просмотр отфильтрованных / отсортированных результатов» по ​​ссылке https://vuejs.org/v2/guide/list.html#Displaying -Filtered-Sorted-Results

Лучший пример:

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}