Vue中v-for循环内@click绑定page.model=true不生效问题求助

这个问题我之前踩过坑！核心问题在于你把data里的响应式属性名存在了字符串里，直接给这个字符串赋值true根本没触碰到真正控制对话框的变量，当然不会生效啦。

为什么原来的写法不生效？ #

你的pages数组里的model字段是字符串值"dialog1"、"dialog2"，当你写@click="page.model = true"时，其实只是把pages数组中对应对象的model属性从字符串改成了布尔值true，完全没有操作到data里的dialog1或dialog2变量——这俩才是绑定对话框v-model的响应式属性，所以对话框自然不会打开。

而直接写@click="dialog1 = true"时，你是直接修改了data里的响应式变量，Vue能监听到变化，所以对话框正常显示。至于你尝试的:@click="page.model = true"（多了冒号，这是绑定属性的语法，不适合事件）和@click="${page.model} = true"（模板字符串语法在Vue模板表达式里不生效），当然也解决不了问题。

正确的解决方法 #

这里提供两种常用的可行方案：

方案一：在模板中通过属性访问器直接操作

利用JavaScript的对象属性访问器，通过字符串属性名来访问data里的变量。因为Vue组件实例的data属性会挂载到自身上，所以可以这么写：

<v-card v-for="page in pages" :key="page.id" @click="this[page.model] = true"></v-card>

或者直接访问$data（组件的响应式数据对象）：

<v-card v-for="page in pages" :key="page.id" @click="$data[page.model] = true"></v-card>

方案二：封装一个方法（更推荐，便于维护）

在组件的methods里写一个专门打开对话框的方法，接收属性名字符串作为参数：

methods: {
  openDialog(modelName) {
    this[modelName] = true;
  }
}

然后在模板里调用这个方法：

<v-card v-for="page in pages" :key="page.id" @click="openDialog(page.model)"></v-card>

这种方式更清晰，后续如果要加打开前的校验、日志等逻辑，直接在方法里扩展就行，可读性和可维护性更好。

内容的提问来源于stack exchange，提问作者Anjo Bautista Liwanag