vuejs dynamic directive bound to data/computed value

Question

I use vuetifyjs for my html & css. One of it's components changes it's styling/behavior based on a custom directive (error || success || warning || info)

e.g.

<v-snackbar error></v-snackbar>
<v-snackbar success></v-snackbar>

Is there a way to bind the directive to a data or computed value?

something like this:

<v-snackbar {{ type }}></v-snackbar>

Answer 1

Create a data property called type (or whatever you want to call it) that has the properties that you want to pass (say, success).

data:{
  type: {success: true}
}

And bind it to the snackbar component.

<v-snackbar v-bind="type"></v-snackbar>

Here is a modified example from their documentation. In the example, click the Set Error or Set Success buttons to change the type.