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>

Those are not directives, they are props of the v-snackbar component — thanksd
– thanksd, Commented Aug 28, 2017 at 19:35
Possible duplicate of Passing props dynamically to dynamic component in VueJS — thanksd
– thanksd, Commented Aug 28, 2017 at 19:36

Bert · Accepted Answer · 2017-08-28 19:47:08Z

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.

answered Aug 28, 2017 at 19:47

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vuejs dynamic directive bound to data/computed value

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related