<v-btn-toggle> button in vue.js and vuetify causing "Property or method is not defined" error

user_14891392 0
Viewed 417

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!

vuetify.js vue.js toggle button javascript
1 Answers

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>
user_117880850
Related