I am new to vuejs, and I would like to know what ':' and '#' does in the context of this code?
I am unsure about if this the initial values for the module.
Thanks for any help.
Here is the code:
<appWindow
:app="activeApp"
:active="windowActive"
#closed="windowActive = false"
#removeApp="removeApp"
#resetNotes="resetNotes"
#updateCheckbox="updateCheckbox"
/>
# is synonymous to v-on:
It is used to handle Event
For more: https://v2.vuejs.org/v2/guide/events.html
<!-- these two are same -->
<button v-on:click="foo()">Button</button>
<button #click="foo()">Button</button>
: is synonymous to v-bind:
It is used to binding value to an attribute
For more: https://v2.vuejs.org/v2/api/#v-bind
<!-- these two are same -->
<img v-bind:src="imgurl">
<img :src="imgurl">
The # is shorthand for v-on
A : on a prop will make the contents evaluate as javascript rather than a string.
Related
Sometimes I don't want to have a "rules" option/property in some input fields, is it possible within vuejs3 to set up a kind of if statement so that the property "rules" are only presented on certain fields? Because now i just do an empty array[]. But would rather see this differently.
So that I dont need to apply "rules" option in my form scheme when I dont need it.
This is my template code:
<div v-for="(prop, key) in formSchema" :key="key">
<q-input v-if="prop.component === 'input'"
outlined
v-model="dataRef[key]"
:type="prop.type"
:label="prop.label"
maxlength="12"
class="super-small"
hint="Name and surname"
lazy-rules
:rules="prop.rules" (want this behind an if statement if not needed)
>
</q-input>
<q-select v-else-if="prop.component === 'select'"
outlined
v-model="dataRef[key]"
:type="prop.type"
:options="prop.options"
:label="prop.label">
</q-select>
</div>
Add a ternary condition within your attribute. When the attribute is set to null or undefined it gets omitted.
:rules="addRule ? prop.rules : null"
I am applying translation in vue 2.x and I am using "vue-gettext" but I am having a problem in some cases eg:
<settings-group label="is a label" >
<settings-field label="is a label">
In those cases I can't find a way to translate the label, I was looking for info and there is nothing, but maybe someone here could solve it...
Things I tried:
<settings-field v-translate label="is a label">
Doesn't work
<settings-field label="{{<translate>is a label</translate>}}">
Throw an error: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use <div :id="val".
thank you.
First option (preferred, since in vue3-gettext translate tag would be eventually removed):
<settings-group :label="$gettext('is a label')" />
Second option -- create slot label in settings-group component. Could be useful if you going to interpolate string based on some data from settings-group
# settings-group.vue
<div class="settings-group">
<span class="label">
<slot name="label" v-bind="{ count }" />
</span>
...
# pages/settings.vue
<settings-group>
<template v-slot:label="{ count }">
<translate
:translate-n="count"
:translate-plural="%{count} elements"
:translate-params="{ count }"
>
%{count} element
</translate>
</template>
</settings-group>
As we know v-model is two way binding. Which means it's combination of V-bind and maybe another attribute which I'm looking for and it updates the data. I have a input which it's value is sometimes custom and sometimes should be read from config based on another parameters.
What I need is an input with a v-bind:value/:value and another for update. I know I can do it with #change and a custom method But I'm looking for something easy, Bottom line is I want V-model without doing v-bind ! Thank You
EDIT: I did it with two input using v-if .
<input type="number" class="item-input" v-if="setting.keto_program=='custom'" id="protein_per_kilo" v-model="setting.keto_program_protein_density">
<input type="number" class="item-input" v-else disabled id="protein_per_kilo" :value="config.keto_programs[setting.keto_program].protein_density">
Anyway doing this using just one input feels better. Thanks
May be you can use computed hook.
computed:{
yourVariable(){
return someVariable/computation
}
}
you can use yourVariable inside your code that will act like v-model without doing v-bind.
yourVariable will be updated as soon as the variables of the return statement of this be changed or updated
Edited:
part of v-model for input tag
<input
v-bind:value="variable"
v-on:input="variable = $event.target.value"
>
or
<input
:value="variable"
#input="variable = $event.target.value"
>
found this via
Vue.js—Difference between v-model and v-bind
I wuld like to add the following style iwhich workss in html
<div style="text-decoration: line-through">
Now am trying this in vuejs2
<div :style="{'text-decoration: line-through':true}">
But the above doesnt work
Where am i going wrong?
Binding an object to the style attribute is done by providing key / value pairs.
I suspect what you want is
<div :style="{'text-decoration': condition ? 'line-through' : 'initial'}">
I have an app that has components nested inside. The app is called on the filter id. I have a data element named minTotalSpent. Currently, this contains "3" in the app. The first placement on the page displays appropriately. When I try to pass it in as a variable into vue-slider, however, it does not like it and throws an "invalid expression"warning on the counsel and does not respect the minimum.
<div id="filter">
<form id="search">
Search <input name="query" v-model="searchQuery">
</form>
{{minTotalSpent}}
<div class="filter-container-slider">
<vue-slider
:min="{{minTotalSpent}}"
:max="42"
:value="2"
>
Just elaborating as per #thanksd's answer.
When using any component, over here vue-slider component, if you use v-min = "..." or :min = "...", the value of v-min or :min is in a javascript expression and you cannot use mustaches inside javascript expression.
And when it comes to html attributes like id on any element, you should be using v-bind.
<div v-bind:id="dynamicId"></div>
Read more about them here: https://v2.vuejs.org/v2/guide/syntax.html#Attributes