I've el-select option with photo, in option i can get photo variable but in default value i can't get defult value with photo.
can you help me?
Expected: default value is McDonald (photo + label)
here my code:
<el-select v-model="value" placeholder="Select">
<el-option v-for="item in outlet" :key="item.value" :label="item.label" :value="item.value">
<img :src="item.photo"> {{ item.label }}
</el-option>
</el-select>
and here is my fiddle:
https://jsfiddle.net/dede402/L4y8zw1e/10/
The selected value template and options templates are differents. el-select allow you to define a prefix slot for the selected template, take a look at : https://jsfiddle.net/budgw/L4y8zw1e/36/
Note that I change your el-select in order to use directly an object as selected value. In that case you have to specify the value-key on el-select.
Related
I have a dynamically made object of facets.
An example of the data could be:
facets: {
type: ['type1', 'type2', 'type3'],
color: ['color1', 'color2']
}
I also have an empty object for filters.
I then loop over the facets object and make checkbox groups for each facet. I want the v-model to be filters."name of the facet", so: filters.type and filters.color. I do not know the names forehand. I tried using the key in a loop but that does not work.
My loop looks like this:
<li v-for="(facet, facetKey, facetIndex) in facets" class="filter-item">
<strong>{{ facetKey }}</strong>
<div v-for="(value, valueIndex) in facet" class="form__fieldset" :key="valueIndex">
<div class="form__field-wrap">
<input type="checkbox" v-model="filters[facetKey]" :id="value.toLowerCase().trim()" :value="value">
<label :for="value.toLowerCase().trim()">{{ value }}</label>
</div>
</div>
</li>
If I hardcode v-model to filters.type, It works as intended. Has anyone achieved this type of dynamic v-models?
Populate filters with your facets properties
filters = ref({
...facets.value
})
Here is the playground link to a working example
I am working on a Vue app made with element UI and I have a bunch of el-select whose el-options need to have default values, meaning the form select fields already have one option pre-selected (of course the user can still choose other options).
I cannot find any attribute in the official doc https://element.eleme.io/#/en-US/component/select#select
But there should be a way to achieve this right?
This is my code
<el-form-item label="some label" prop="someprop">
<el-select v-model="form.status" filterable clearable>
<el-option
v-for="(item, index) in config.status"
:key="index"
:label="item"
:value="index"
how to have default option here??
>
</el-option>
</el-select>
</el-form-item>
Just put in the form.status the indexes that should be pre-selected. Vue will take care of the rest.
data(){
return {
form: { status: ['thisWillBePreSelected'], },
}
}
I have Vue drop-down.
<b-dropdown id="dropdown-1" text= "UserName" class="m-md-2" >
<b-dropdown-item class="dropdown-link">Log out</b-dropdown-item>
</b-dropdown>
I need t change value of drop down. In my case it's UserName
I only found this way:
document.getElementById("dropdown-1").childNodes[1].innerHTML="new value"
I know it's not correct way but I didn't find correct way (via the API or something like that). This method does not work too:
text= "{{ variable }}"
Any ideas?
You can bind a dynamic value for text prop on <b-dropdown> and change it with the click event of <b-dropdown-item>
<b-dropdown :text="buttonTitle">
<b-dropdown-item #click="buttonTitle = 'new value'">Log out</b-dropdown-item>
</b-dropdown>
//script
data () {
return {
buttonTitle: 'Username'
}
}
MuratK is probably right, however I understand that you want to bind the dropdown item, not the parent element. You could do so with a v-for and text binding, like:
<b-dropdown id="dropdown-1" class="m-md-2" >
<b-dropdown-item v-for="item in items" v-text="item"></b-dropdown-item>
</b-dropdown>
Then, in your data define 'items' as an array of strings, such as ['log out', 'preferences', 'sign it']. You can also use this syntax, it does the same in your example:
<b-dropdown-item v-for="item in items">{{ item }}</b-dropdown-item>
To make text dynamic, you should bind it to a variable of your Vue component instance. An HTML attribute can be made dynamic and bound to a variable by using the : prefix before the attribute name (which is a shorthand of v-bind:)
Given :
<b-dropdown id="dropdown-1" :text="variable" class="m-md-2" >
<b-dropdown-item class="dropdown-link">Log out</b-dropdown-item>
</b-dropdown>
In the component you should have the corresponding variable declaration :
data() {
return {
variable: '' // Variable initialisation
}
}
I need to do simple drop-down list (aka select) with Vue Element. I need to put selected value id in variable, but I can't understand how to do it with Element. I know how to do it in pure Vue, but it's do not working with Element.
Here is my code https://jsfiddle.net/dxh2mbkv/
<el-select clearable placeholder="Select" class="SelectFullWidth" >
<el-option
v-for="item in people"
:value="item.name" >
</el-option>
</el-select>
I need to get selected id in variable.
There is small issue with example. It's now working, because I have never used Vue Element with jsfiddle.
Pure Vue solution that I need reimplement in Vue element https://jsfiddle.net/mani04/3x0z3vzk/
I have modified your fiddle to make it work:
https://jsfiddle.net/dxh2mbkv/33/ (if you can't see labels in dropdown it seems to be jsfiddle issue, when you open developer tools in your browser or shrink your screen width, they should appear)
<el-select clearable placeholder="Select" class="SelectFullWidth" v-model="selectedPerson">
<el-option
v-for="item in people"
:key="item.key"
:label="item.name"
:value="item.key" >
</el-option>
</el-select>
Key: {{selectedPerson}}
What I did was I added v-model="selectedPerson" to el-select, changed your :value in el-option from item.name to item.key and added :label="item.name" to display option labels properly. And since your selectedPerson binds to a number, I changed it's default value to null.
This works:
<span v-if="name">
Hi there, {{ name }}
</span>
... but it forces me to use span for the whole text, I just want it on the name variable. In handlebars for example I could do:
{{#if name}}
Hi there, <span>{{ name }}</span>
{{/if}}
You can use a template for that.
we can use v-if on a <template> element, which serves as an invisible
wrapper. The final rendered result will not include the <template>
element.
For example:
<template v-if="name">
Hi there, <span>{{ name }}</span>
</template>