Question

我在.vue文件中有一个表格组件，并且我试图根据单击顺序的目录显示一些图标

示例：

<th v-for="(column, index) in columns" :key="index" @click="sort( index )">
                <span>{{ column.label }}
                    <i v-if="column.dir == 'desc'" class="fa fa-sort-down"></i>
                    <i v-else class="fa fa-sort-up"></i>
                </span>

上面是标题的布局，我的默认列对象如下所示：

data().....
  columns: [ 
            {
                label: '#',
                order: false,
                search: false,
                column: 'id',
                dir: 'desc'
            },
            {
                label: 'Username',
                order: true,
                search: true,
                column: 'username',
                dir: 'desc'
            }]

现在，在我的排序方法中，我更新点击的列

var col = this.columns[column];
col.dir = ( col.dir == 'desc' ) ? 'asc' : 'desc';


// I tried to no avail
this.$set(this.columns, index, col);

Vue.set(this.columns, index, col);

Also
this.$nextTick(function() {
  columns[index].dir = ( columns[index].dir == 'desc' ) ? 'asc' : 'desc';

});

如果我检查Vue开发工具，则可以看到值已更新，但反应性永远不会回到主列对象，并且视图也不会更新以显示else部分。

可能没有牢牢把握这个概念，将不胜感激。谢谢

更新.....

非常感谢您的帮助，所以我碰巧font-awesome正在从DOM中删除并将其替换为SVG，从而使vue js无法找到它。

尽管如此，我仍然会在下面选择一个答案。

Answer 1

我复制了您的大部分代码，对我来说很好... https://jsfiddle.net/aj2nf6cw/

是因为您写了var col = this.columns[column];而不是var col = this.columns[index];吗？

使用var很好，因为它是对象，它将自动引用this.columns[index]。

PS：我认为您使用的Vue.set不正确。请参阅：https://vuejs.org/v2/api/#Vue-set。如果要使用它，它将是Vue.set(this.columns[index], 'dir', 'asc');，但是由于您的数据已经是反应性的，因此不必使用它。

Answer 2

您正在做的事情行不通，因为您正在sort方法中创建一个没有this.columns之类的Vue可观察到的var。我给你一个working code example here

但是基本上，您需要在sort方法中更改此部分。

sort(index){
   this.columns[index].dir = (this.columns[index].dir == 'desc') ? 'asc' : 'desc'; 
}

如何在循环vue.js中进行动态条件渲染（v-if在v-for中）

2 个答案: