如何在循环 vuejs 中进行动态条件渲染（ v-if in v-for ）答案

【问题标题】：How to do dynamic conditional rendering in loop vuejs ( v-if in v-for )如何在循环 vuejs 中进行动态条件渲染（ v-if in v-for ）
【发布时间】：2019-10-07 22:45:52
【问题描述】：

我在 .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 无法找到它。

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

【问题讨论】：

列是数据吗？
@HamiltonGabriel 是的
@MueyiwaMosesIkomi 我认为这篇文章会有所帮助 - stackoverflow.com/questions/40453427/…
问题是您使用index 作为键。相反，请使用唯一标识符。说column?
尝试了类似@DJC 的方法，但没有用......我认为它适用于布尔值，但不适用于字符串。不过谢谢

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

你正在做的事情不起作用，因为你在 sort 方法中创建了一个 var，它没有像 this.columns 这样的 Vue 可观察对象。我给你留了working code example here

但基本上你需要在排序方法中更改这部分。

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

【讨论】：

我把那个按钮放在那里只是为了测试。
我曾尝试过类似的东西。与我的其他尝试一样，该索引的值会发生变化......如果用户界面没有。如果它的 asc 它应该显示 v-else 但它没有。反应不会发生@Jalil。您可以将点击添加到 th 本身。谢谢
告诉我它是否有效，如果有效，请将答案标记为好让其他人也看到它。如果没有，请告诉我 c;
@sure will...我注意到一些奇怪的东西...如果它确实{{ column.dir }}，值会改变。但它不适用于 v-if。奇怪
在我的 font-awesome 中，从 dom 中删除了并用 svg 替换它...所以 vue js 找不到它

【解决方案2】：

我复制了你的大部分代码，它对我来说很好用...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');，但您不必使用它，因为您的数据已经是反应性的。

【讨论】：