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

如果您使用的是类似

r.meta.fields = newValue

那么这行不通。

您应该使用

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

此处的文档：vue update array

Answer 2

您可以为排序图标创建映射，并在单击时处理更改：

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>

更改数据数组后，v-if和v-else无法正常工作

2 个答案:

模板或HTML