如何修改用:set声明的模板变量?

Question

我有以下代码(vue v3.2.33)

<template v-for="route of routes" :key="route.name">
<li :set="open = false">
<div class="collapse"
@click="open = !open"
:class="[open ? 'collapse-is-open' :  '']">
</div>   
</li>
</template>

基本上每个li都有一个坍缩，并以collapse-is-open类打开。我试图使用:set属性的变量并修改该变量，但它似乎不起作用。

如果这不起作用，还有什么其他方法呢?基于我在:key中设置的跟踪所有状态的值的对象?

Answer 1

:set是v-bind指令的语法。它在元素上绑定了一个属性/属性，但是<li>没有这样的set属性。我想你正在尝试为每个<li>创建一个名为open的临时变量，但该功能在Vue中不存在(也许你正在考虑petite-vue的v-scope)。

一个解决方案是创建一个单独的数据结构，其中包含每个<li>的打开状态，并使用它来更新class绑定:

export default {
data() {
return {
routes: [⋯],
open: {} // stores open-state of each route item
}
}
}

<template v-for="route of routes" :key="route.name">
<li>
<div class="collapse"
@click="open[route.name] = !open[route.name]"
:class="[open[route.name] ? 'collapse-is-open' :  '']">
</div>   
</li>
</template>

演示1

或者，您可以将该属性添加到routes中的每个数组项:

export default {
data() {
return {
routes: [
{
name: 'Route 1',
open: false,
},
{
name: 'Route 2',
open: false,
},
{
name: 'Route 3',
open: false,
},
],
}
},
}

<template v-for="route of routes" :key="route.name">
<li>
<div class="collapse"
@click="route.open = !route.open"
:class="[route.open ? 'collapse-is-open' :  '']">
</div>   
</li>
</template>

演示2