I'm trying to attach the values I get from a v-for to attributes in the same tag but with no luck. Here's my code:
<label
v-for="hashtag in hashtags"
v-bind:title=`You can filter with {hashtag}`
v-bind:data-value="hashtag"
></label>
Basically the value goes to the title and data-value
your title binding should have double quotes before and after the expression, and it seems that you want a string interpolation in title, but I don't think it will work.
try this (you can ommit v-bind cus : its a shorthand for it)
<label v-for="hashtag in hashtags" :title="'You can filter with ' + hashtag" :data-value="hashtag">
{{ hashtag }}
</label>
https://jsfiddle.net/5sqs5fsq/
Related
How can I add text to an empty list? If there's nothing added I want to have my own text.
Do I need to add v-if, .length or?
.row.pl-3.pr-3.this-row
.col-md-8
p.title Name
//- .col-md-4
//- p.title Banned products
.row.py-2.pl-3.pr-3.disrow.d-flex.align-items-center(
v-for="disease in dietDiseases"
)
.col-md-6
span {{ disease.name }}
.col-md-6.text-right
b-button(variant="danger", #click="deleteDietDiseases(disease.id)") Delete
You can add a v-if condition just before your v-for element:
.row( v-if="dietDiseases.length === 0" )
span My custom text
.row(
v-for="disease in dietDiseases"
)
...
Note that you should not add a v-else to the v-for component, since the v-for will not display content if the array is empty. You can run into unexpected issues if you use v-if/else and v-for on the same element. Source: https://v2.vuejs.org/v2/guide/conditional.html#v-if-with-v-for
EDIT: If the v-for row should not be rendered for styling reasons, you can place it inside a <template> tag which acts as an invisible wrapper:
.row( v-if="dietDiseases.length === 0" )
span My custom text
template( v-else )
.row(
v-for="disease in dietDiseases"
)
...
I am making a form in a Vue component and would like to set the HTML attribute required to an input field based on the value I am having in an object property.
So, for the example, an object that has fields like this:
label:"Name"
required:"1"
type:"textbox"
I need to a set the field to have required attribute in an input tag:
<input class="input is-large" :type="input.type" required>
And for the ones that don't have 1 as a value for that field I don't want a required attribute.
How can I do that in Vue?
You can do it like this:
<input class="input is-large" :type="input.type" :required="obj.required == 1">
Since your object's required property has 1 as a string not number I used == for comparison so that equality is tested after coercion
I'm sorry if this is already solved but I'm not able to find it so I gonna try to be quick.
Imagine one of the props received by my component has the following value:
myAnnoyingProp: "Position of {{$data.name}} {{maritalStatus?\'married\':\'free\'}}"
I tried the following two options but I've got the same result for both:
<label v-html="element.label"></label>
<label>
{{element.label}}
</label>
Expected result:
Position of TheNameSetted free
Obtained result:
Position of {{$data.name}} {{maritalStatus?\'married\':\'free\'}}
PD: I'm using Vue 2.4.2
You could move the login inside your component by making use of 2 props, for example name, which is a String, and maritalStatus, which is either a String or Boolean depending on your needs (the example assumes a Boolean for maritalStatus). Then inside your component construct the message you want to display:
<label>
Position of {{element.name}} <span v-if="maritalStatus">Free</span><span v-else>Married</span>
</label>
You could also use string literals:
myAnnoyingProp: `Position of ${name} ${maritalStatus}`
I would like to have something like the following Vue template, but it does not work with the property selectedVal. What is the correct property name?
<select :selectedVal="myList" multiple>
<option value="abc">ABC</option>
</select>
For <input> the prop to bind is value, but for <select> it does not seem to be documented anywhere. I am looking for the name of the correct prop to bind.
I answered because it's difficult to quote code snippet in a comment.
I think you asked this question after looking into the document here, which showed an elegant way to define selected items.
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
Actually, I doubt if there's a v-bind prop performs like this because value is an attribute of input and option, but selected is not an attribute of select but an attribute of option and I can't find any alternatives in select.
Also, after browsing the source code of Vue.js, I didn't see vue did much for binding an attribute (code here and here) rather than pushing values of v-bind into the element's attrs list.
export function addAttr (el: ASTElement, name: string, value: string) {
(el.attrs || (el.attrs = [])).push({ name, value })
}
On the other hand, select seems to be an special case in v-model (see code here).
So, I provided the solution in the comment by binding selected to option instead of select.
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