v-if и v-else не работают после изменения массива данных

Question

В зависимости от массива 'r.meta.fields' должен быть показан конкретный значок сортировки каждого столбца.Когда шаблон рендеринга, он работает правильно.Но когда массив изменяется, шаблон больше не меняется.

<th v-for="field in r.meta.fields">
        {{field.label}}

    <a href="#" @click.prevent="sortField(field)">
        <div class="fa fa-sort-up" v-if="field.sort_direction === 'desc'"></div>
        <div class="fa fa-sort-down" v-else-if="field.sort_direction === 'asc'"></div>
        <div class="fa fa-sort" v-else-if="field.sortable"></div>
    </a>

В чем может быть проблема?

Answer 1

Вы можете создать отображение для значков сортировки и обрабатывать изменения при нажатии:

const vm = new Vue({
  el: '#app',

  data() {
    const iconMap = {
      sort: {
        'asc': 'fa-sort-up',
        'desc': 'fa-sort-down'
      }
    };

    return {
      r: {
        meta: {
          fields: [
            {
              label: 'field #1',
              sortable: false,
              sort_direction: 'asc',
              icon: ''
            }, 
            {
              label: 'field #2',
              sortable: true,
              sort_direction: 'desc',
              icon: iconMap.sort['desc']// Initially sortable in descending order
            }
          ]
        }
      },

      iconMap
    }
  },

  methods: {
    sortField(field) {
      let direction = (field.sort_direction === 'asc') ? 'desc' : 'asc';
      let icon = this.iconMap.sort[direction] || '';

      field.sort_direction = direction;
      field.icon = icon;
    }
  }
})

Шаблон или HTML

<div id="app">
  <table>
   <tr>
    <th v-for="field in r.meta.fields" :key="field.label">
       {{field.label}}

       <a href="#"
        :class="field.icon"
        @click.prevent="sortField(field)"></a>
    </th>
   </tr>
  </table>
</div>

Answer 2

если вы используете что-то вроде

r.meta.fields = newValue

, тогда это не сработает.

вам следует использовать

Vue.set(r.meta.fields, indexOfItem, newValue)

документ здесь: массив обновлений vue