如何修改用 :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 都有一个折叠并以 class collapse-is-open 打开。我尝试使用具有 :set 属性的变量并修改该变量，但它似乎不起作用。

如果那行不通，还有什么其他方法可以做到这一点？基于我在 :key 中设置的值的对象跟踪所有状态？

Answer 1

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

一个解决方案是创建一个单独的数据结构，其中包含每个 <li> 的 open-state，并使用它来更新 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>

demo 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>

demo 2

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

How can I modify template variables declared with :set?

vue.js

vuejs3