I'm new in vuetify, and it's the first time i'm using <v-btn-toggle>
I want to add this toggle to be able to filter my user list depending of the type of user, employee, manager or admin...
here is a sample of my code:
<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>
data() {
return {
toggle_user: 1,
}
},
I displayed the result on the page using: <p>{{toggle_user}}</p> and it's well showing an array depending on the selected values....
But anytime I click on one of the three buttons, I got an error:
Property or method ["employee" or "manager" or "admin"] is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
What is wrong with the code I wrote?
Thanks a lot if you can help! Have a nice day!
It is right there in the error message. There is data that has not been defined yet, but has been referenced during render.
Try the following, and see if that gives the result you are looking for.
<script>
export default {
data() {
return {
toggle_user:1,
employee: "employee",
manager: "manager",
admin: "admin",
};
},
};
</script>