Vue 动态 V-For 显示和隐藏 div

Question

我想显示一个div并在单击它时隐藏另一个div。 但发生的情况是：我有一个用户列表，每个用户的名称旁边都有一个图标。单击一个图标会为每个用户更改它(因为单击一个图标时，它应该隐藏它并显示另一个图标(。 那么我怎样才能区分它们呢？ 信息：我的控制台日志工作，它显示不同的用户，但我如何设法区分 v-show 指令？

<template>
<span>
<span class="userListContent" v-for="user in this.userResults" :key="user.id">
<a :href="'/profile/'+user.id" target="blank">{{user.name}}</a>
<i v-show="visibleBefore" @click="visibleAfter = true" class="far fa-plus"></i>
<i v-show="visibleAfter" class="far fa-check-circle"></i>
<input type="checkbox" />
</span>
</span>
</template>
<script>
export default {
props: ["userResults"],
data: function() {
return {
visibleBefore: true,
visibleAfter: false
};
},
methods: {
change(user) {
console.log(user);
//   this.visibleBefore = false;
//   this.visibleAfter = true;
}
}
};
</script>
<style>
</style>

我还尝试在数据函数中有一个用户对象，但这似乎是完全错误的。 提前致谢

Answer 1

最好的方法是创建一个UserListItem组件，将用户作为道具接收：

<template v-for="user in this.userResults" :key="user.id">
<user-list-item :user="user"/>
</template>

然后在内部，您可以有一个boolean来切换图标，如下所示：

// UserListItem.vue
<template>
<span class="userListContent">
<a :href="'/profile/'+user.id" target="blank">{{user.name}}</a>
<i @click="showPlusIcon = !showPlusIcon" class="far" :class="iconId"></i>
<input type="checkbox" />
</span>
</template>
<script>
export default {
props: {
user: {
type: Object,
required: true
}
},
data () {
return {
showPlusIcon: true
}
},
computed: {
iconId () {
return this.showPlusIcon ? 'fa-plus' : 'fa-check-circle'
}
}
}
</script>

Answer 2

试试这段代码：

<template>
<div>
<div v-for="user in users" :key="user.id">
{{user.name}}
<template v-if="user.visible">
<button @click="onClick(user.id)">Show</button>
{{user.email}}
</template>
<template v-if="! user.visible">
<button @click="onClick(user.id)">Hide</button>
{{user.phonr}}
</template>
</div>
</div>
</template>
<script>
export default {
methods: {
onClick(id) {
this.users.map(user => {
if(id = user.id) {
user.visible = !!! user.visible
}
})
},
}
}
</script>

您需要将visible function放入数据库中，也可以将它们作为另一个字段推送到data object中。然后你可以切换visible.

Answer 3

你可以在 v-for 中使用 v-if @code-for-money给出的答案很好，但他可以使用V-else而不是写两次V-IF。

v-if="user.visible"
v-else

查看文档，它解释了所有可能性

Answer 4

<template>
<div>
<!-- parent[0] -->
<div v-for="user in users" :key="user.id" :ref="`div-${user.id}`">
<!-- children[0] -->
<div>
{{user.name}}
</div>
<!-- children[1] -->
<div> 
<button @click="onClick(user.id, 'show')">Show</button>
{{user.email}}
</div>
<!-- children[2] -->
<div>
<button @click="onClick(user.id, 'hide')">Hide</button>
{{user.phone}}
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
onClick(id, sts) {
if(sts == 'show'){
this.$refs['div-'+id][0].children[0].hidden = false;
this.$refs['div-'+id][0].children[1].hidden = true;
this.$refs['div-'+id][0].children[2].hidden = false; 
}
else {
this.$refs['div-'+id][0].children[0].hidden = true;
this.$refs['div-'+id][0].children[1].hidden = false;
this.$refs['div-'+id][0].children[2].hidden = true; 
}
console.log(this.$refs['div-'+id]); // You can find all element here
},
}
}
</script>