Vuejs Use Prop As Data-attribute Value
Solution 1:
Bind the attribute like this :data-tab-url="foo"
.
This will give the affected element a data-tab-url
attribute with a value equal to the foo
property of your component.
Solution 2:
thanksd's answer is right but;
for further understanding:
You can't use mustache syntax for attribute binding. Use mustache {{}} only content of a dom element, ie.
<div>{{someValue}}</div> (THIS IS WRONG)
To bind any attribute, including template props any other attribute, such as "src" or "data-tab-url" like in question, you can use "v-bind:attr" or ":attr" shorthand, ie.
<divv-bind:src="someDataVariable"></div>
or
<divv-bind:some-prop="someMethod()"></div>
You can use any member(data, method, computed etc.) of your component or Vue app, without "this".
Solution 3:
To render any component instance property (prop, data, computed ...) inside html you've to :
Bind it to an attribute using
v-bind:
or the shorthand:
like:foo="someFoo"
Use it inside mustache syntax
{{someFoo}}
Use it as directive value
v-show="isShown"
orv-model="username"
, directives are always prefixed byv-
For the events, they are written like v-on:eventName
or @eventName
which could run an inline statement @click="count++"
or a method @click="increment"
knowing that increment
is a function defined inside the methods
options
Post a Comment for "Vuejs Use Prop As Data-attribute Value"