2

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>
Chris
  • 13,100
  • 23
  • 79
  • 162
  • 1
    Those are not directives, they are props of the `v-snackbar` component – thanksd Aug 28 '17 at 19:35
  • Possible duplicate of [Passing props dynamically to dynamic component in VueJS](https://stackoverflow.com/questions/43658481/passing-props-dynamically-to-dynamic-component-in-vuejs) – thanksd Aug 28 '17 at 19:36

1 Answers1

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.

Bert
  • 80,741
  • 17
  • 199
  • 164