最原始的写法
<template> <div> <div v-for="(item, index) in items" :key="item.id" :class="{ active: item.active }" @click="handleClick(item)"> {{ item.text }}div>
div>
但是不是所有的后端都会返回字段的值是true 和false
这时候 换种写法
const state=reactive({
stepData:[]
isEdit:new Array(stepData.length).fill(false)
})
这时候，会报错的，can't access lexical declaration 'stepData' before initialization
这个错误是因为你在创建
state 对象时，使用了
stepData 变量，但是这个变量还没有被初始化。你需要先初始化
stepData 变量，然后再使用它来创建
state 对象。
这样改
const stepData = [] // 先定义为空数组
const state = reactive({
stepData, // 将空数组作为初始值传入
isEdit: new Array(stepData.length).fill(false)
})
这种写法不能 用toRefs 将变量导出，
如果你在
state 对象中已经定义了
stepData 属性，那么在使用
toRefs 函数时，不能再次定义同名的变量
stepData，否则会报重复定义的错误。
这时候要么删除toRefs 中的stepData,要么就是更改变量名
const { stepData: refStepData } = toRefs(state)
// 在模板中使用普通的引用类型
{{ refStepData.value }}