Vue+Vuetify中v-btn-toggle触发属性或方法未定义错误如何解决

1. 核心报错原因 #

你给<v-btn>的value属性加了v-bind绑定前缀:，Vue会把引号内的employee/manager/admin当成当前组件实例的变量去读取，但你没有在data中定义这三个变量，所以触发了未定义报错。

如果你想把这三个值作为固定字符串传递给value，有两种修正方式：

• 去掉v-bind前缀，直接写value="employee"，此时引号内内容自动作为字符串处理
• 保留v-bind的话，给值加引号包裹，写成:value="'employee'"，显式声明这是字符串类型的值

2. 额外存在的类型不匹配问题 #

你给<v-btn-toggle>加了multiple多选属性，此时v-model绑定的变量需要是数组类型，你当前在data里初始化的toggle_user: 1是数字类型，后续多选逻辑会出问题，建议修正为初始空数组：

data() {
    return {
        toggle_user: [],
    }
},

修正后完整代码示例 #

模板部分 #

<v-btn-toggle
  v-model="toggle_user"
  multiple
>
  <v-btn value="employee">
    Employees
  </v-btn>
  <v-btn value="manager">
    Managers
  </v-btn>
  <v-btn value="admin">
    Admins
  </v-btn>
</v-btn-toggle>
<p>{{toggle_user}}</p>

脚本部分 #

data() {
    return {
        toggle_user: [],
    }
},

内容的提问来源于stack exchange，提问作者Antoine