I was trying to understand a Vue code when I saw something like this
<q-field
v-if="isEditing"
:label="to.label"
:helper="helper"
Can someone explain me what does this:label="to.label" mean in VueJS
Add a comment
|
4 Answers
If you want to bind any dynamic behaviour, we need to use 'v-' prefix. in shorthand we can use ':'
full syntax v-bind:href="url"
shorthand :href="url"
Comments
As is mentioned above it is equivalent to the v-bind:
May also help to mention that anything you write inside of the quotes
:label="in here"
will be read dynamically. So for the code you were looking at to.label and helper are most likely values defined elsewhere
Comments
:label="to.label is equal,
- Binding dynamic value v-bind:label="your_dynamic_value".
- Label is a props from q-field component.
Comments
In vuejs documentation you can read how to bind props , here is the full explanation about this : https://v2.vuejs.org/v2/guide/components-props.html
Simply if I want to bind prop from parent component to child , I can use :name_of_prop="value_of_prop"
This ':' are short hand from v-bind :)
