Element UI
I have fetch the data from backend and use it as select option which does not come with value object, but
when I try to select any item in select option, the select option show all item list selected, but the model value is correct
Follow Code Fetch the Bug
<el-option
v-for="item in options"
:key="item.key"
:label="item.label"
:value="item">
</el-option>
This was the Sample Bug I created...
https://codepen.io/JackarooNg/pen/qBRdqgO
The problem is with model name is matched with select option's property of key and label
Step 1: Script will be like
<script>
new Vue({
el: "#app",
data: function () {
return {
visible: false,
options: [
{
value: "Option1",
label: "Option1"
},
{
value: "Option2",
label: "Option2"
},
{
value: "Option3",
label: "Option3"
}
],
options1: [
{
value: "Option1",
label: "Option1"
},
{
value: "Option2",
label: "Option2"
},
{
value: "Option3",
label: "Option3"
}
],
value: "",
value1: ""
};
}
});
Step 2: HTML template will be
<div id="app">
<el-button #click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
<el-select v-model="value" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item"
>
</el-option>
</el-select>
{{value}}
<el-select v-model="value1" placeholder="Select">
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item"
>
</el-option>
</el-select>
{{value1}}
</div>
DEMO
Related
I have a dynamic list of custom components which are input fields. From my parent vue ,when a button is clicked, how can I write a method that will loop through all the components in my list to get their values?
input-field.vue
<template>
<div>
<input
type="text"
:name="name"
:id="id"
#input="valueChanged"
v-model="val"
/>
</div>
</template>
app.vue
<div>
<ul>
<ul v-for="item in items" :key="item.id">
<my-input :name="item.name" :id="item.id" #input="onChange" />
</ul>
</ul>
<button>READ FIELDS</button>
</div>
</template>
<script>
import myInput from "./components/input-field.vue";
export default {
name: "App",
data() {
return {
items: [
{ id: "3", name: "test3" },
{ id: "4", name: "test4" },
{ id: "5", name: "test5" },
],
};
},
components: {
myInput
},
methods: {
//on button click function here
//how can I get the data from the my-input components
}
};
</script>
There is no need to read the values. Bind them like this: Playground
Read and understand what I have done, do not copy-paste. I have changed some of your code eg. imports
input-field.vue
<template>
{{name}}
<input type="text"
:name="name"
:id="id"
:value="modelValue"
#input="$emit('update:modelValue', $event.target.value)" />
</template>
<script>
export default {
props: ["modelValue", "id", "name"],
emits: ["update:modelValue"]
}
</script>
app.vue
<template>
<div v-for="item in items" :key="item.id">
<my-input :name="item.name" :id="item.id" v-model="item.value"></my-input>
</div>
<br />
<b>Values in App.vue</b>
<table border=1>
<tr v-for="item in items" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.value}}</td>
</tr>
</table>
</template>
<script>
import myInput from "./input-field.vue";
export default {
name: "App",
data() {
return {
items: [
{ id: "3", name: "test3", value: "test input" },
{ id: "4", name: "test4", value: "" },
{ id: "5", name: "test5", value: "" },
],
};
},
components: {
myInput
},
};
</script>
Try to select from datalist while a data property is updated on a interval.
What is wrong in my code?
http://jsfiddle.net/startflorin/gr6b1h7j/18
Mounted intervals:
setInterval((ctx) => { ctx.notification = "111"; }, 500, this);
setInterval((ctx) => { ctx.notification = "222"; }, 500, this);
Data:
data: {
notification: null,
demoList:[
{
id: 1,
name: "option 1",
},
{
id: 2,
name: "option 2",
},
{
id: 3,
name: "option 3",
},
],
},
My HTML code:
<div>
{{ notification }}
</div>
<input list='demoList' v-on:change="selectSymbolList(target.value)">
<datalist id="demoList">
<option v-for="item in this.demoList" v-bind:value="item.name" v-bind:key="item.id">{{ item.name }}</option>
</datalist>
To cache the rendering of <input> and <datalist> (to isolate them from unrelated changes in the component's template), put them into a component:
Vue.component('demo-list', {
props: ['items'],
template: `<div>
<input list='demoList'>
<datalist id="demoList">
<option v-for="item in items" v-bind:value="item.name" v-bind:key="item.id">{{ item.name }}</option>
</datalist>
</div>`
})
Note this example requires the runtime compiler to compile the template string. Otherwise, render functions would be required instead of template.
Then use the component in your app's template:
<div id="app">
<div>{{ notification }}</div>
<demo-list :items="demoList"></demo-list>
</div>
demo
I have the following:
<div v-for="num in [1,2,3,4,5]" :key="num ">
<customelement0 :num ="num" />
<span #click="show = !show" > Details: </span>
<customelement1 v-if="show" :num ="num" />
<hr />
</div>
and:
export default {
data() {
return {
show: false
};
},
};
However, in this implementation Whenever show changes it affects all of the customelement1s and will show/hide all of them.
How would one solve this problem, so that whenever a user clicks on the span it only shows/hides one element in the loop?
P.S.: in reality, the length of the loop is much longer, than what's indicated above
The problem here is essentially that your show is a variable for the entire component, and isn't linked to one of your array elements.
Generally, we don't really tend to hard-code an array into the html, but rather in the data, as shown in the other answers.
The other answers show it with num being coded into the object but you could also do something like this. Note that other field is optional and not required. The main advantage of this method is that you don't need to code every number.
<div v-for="(item, i) in items" :key="i">
<!-- Note I do i+1 so that it matches the 1,2,3 in your example -->
<!-- if you're okay with having 0,1,2 you can omit the +1 -->
<customelement0 :num="i+1" />
<span #click="item.show = !item.show" >Details: </span>
<customelement1 v-if="item.show" :num="i+1" />
<hr />
</div>
export default {
data() {
return {
items: [
{show: false, other: "foo"},
{show: false, other: "bar"},
//...
],
};
},
};
You can change number to object and toggle property:
<div id="app">
<h2>Todos:</h2>
<ol>
<li v-for="todo in todos">
<label>
<input type="checkbox"
v-on:change="toggle(todo)"
v-bind:checked="todo.done">
<del v-if="todo.done">
{{ todo.text }}
</del>
<span v-else>
{{ todo.text }}
</span>
</label>
</li>
</ol>
</div>
new Vue({
el: "#app",
data: {
todos: [
{ text: "1", done: false },
{ text: "2", done: false },
{ text: "3", done: true },
{ text: "4", done: true },
{ text: "5", done: true },
]
},
methods: {
toggle: function(todo){
todo.done = !todo.done
}
}
})
You can to save the value isShow for each element in the array. So you need to use an array of objects in you data and do something like this:
export default {
data() {
return {
numList: [
{
num: 1,
isShow: true
},
{
num: 2,
isShow: true
}
]
};
},
};
In your template:
<div v-for="item in numList" :key="item.num">
<customelement0 :num="item.num" />
<span #click="item.isShow = !item.isShow" > Details: </span>
<customelement1 v-if="item.isShow" :num="item.num" />
<hr />
</div>
I'm using <datalist> drop-down menu to display group names in our project.
<data-list
ref="groupName"
name="groupName"
label="Groups: "
:options="groupList"
></data-list>
.....
methods:{
groupList(){
return this.$store.getters['Groups/getGroups']
}
}
But this is displayed in my UI:
I actually want the dropdown to display the label field, which is a group name, and I'll get the value of it. The structure of returned value looks like this:
[
{label: "test", value: 14},
{label: "Test1", value: 16},
{label: "Test2", value: 17},
{label: "Test3", value: 18},
]
It seems the bug is in your data-list component. Most likely you have something like this:
<!-- XXX: DON'T DO THIS -->
<option v-for="option in options" :value="option">{{option}}</option>
Vue.component('data-list', {
props: ['label', 'options'],
template: `
<div>
<label for="myinput">{{label}}</label>
<input id="myinput" list="mydata">
<datalist id="mydata">
<!-- XXX: DON'T DO THIS -->
<option v-for="option in options" :value="option">
{{option}}
</option>
</datalist>
</div>`,
});
new Vue({
el: '#app',
data() {
return {
groupList: [
{label: "test", value: 14},
{label: "Test1", value: 16},
{label: "Test2", value: 17},
{label: "Test3", value: 18},
]
};
}
})
<script src="https://unpkg.com/vue#2.5.17"></script>
<div id="app">
<data-list label="Groups: " :options="groupList"></data-list>
</div>
But you actually need to set the value of <option> to option.value and its inner text to {{option.label}} (matching your item's data structure):
<option v-for="option in options" :value="option.value">{{option.label}}</option>
Vue.component('data-list', {
props: ['label', 'options'],
template: `
<div>
<label for="myinput">{{label}}</label>
<input id="myinput" list="mydata">
<datalist id="mydata">
<option v-for="option in options" :value="option.value">
{{option.label}}
</option>
</datalist>
</div>`,
});
new Vue({
el: '#app',
data() {
return {
groupList: [
{label: "test", value: 14},
{label: "Test1", value: 16},
{label: "Test2", value: 17},
{label: "Test3", value: 18},
]
};
}
})
<script src="https://unpkg.com/vue#2.5.17"></script>
<div id="app">
<data-list label="Groups: " :options="groupList"></data-list>
</div>
you can to use like this in html and js.
actually following code is not a component.
sample HTML code
<datalist id="browsers">
<option v-for="lst in groupList" v-bind:value="lst">{{lst.label}}</option>
</datalist>
sample Vue.js code
data:{
groupObj: {},
groupList: []
},
methods:{
groupList(){
this.groupList = this.$store.getters['Groups/getGroups'];
},
},
mounted(){
this.groupList();
}
I understand the question as "How to work with objects in datalists in vue.js"
what are datalists?
datalists provides just templates to fill other controls.
mostly used with text input to provide combobox functionallity (allow also new content to be selected)
At this time implementation in browsers vary greatly, so better to just rely on basic label rendering (don't use value, since browsers handle it differently)
using it in vue with objects
Idea is to use strings and check on every input change if we have a perfect match. Using :value will show the id in chrome, which is probably not what you want. This doesn't work with same-named labels, but then again, such an input makes little sense in that case.
Vue.component('test-data-list', {
props: ['label', 'options', 'value'],
template: `
<div>
<label for="myinput">{{label}}</label>
<input id="myinput" list="data" #change="change" :value="getValue">
<datalist id="data">
<option v-for="option in options">
{{option.label}}
</option>
</datalist>
</div>`,
computed: {
getValue() {
return this.value ? this.value.label : '';
}
},
methods: {
change(e) {
let value = e.currentTarget.value;
if (value) {
let sel = this.options.filter(c => c.label == value);
if (sel.length == 1) {
this.selection = sel[0];
} else {
this.selection = {
label: value,
isNew: true
}
}
} else {
this.selection = undefined;
}
this.$emit('input', this.selection)
}
}
});
new Vue({
el: '#app',
data() {
return {
result: undefined,
groupList: [{
label: "something",
id: 1
},
{
label: "this too",
id: 2
},
{
label: "something different",
id: 3
}
]
};
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
Selected:
<span v-if="result">
"{{ result.label }}"
<span v-if="result.isNew">New!</span>
<span v-else> old object with id:{{result.id}}</span>
</span>
<span v-else>nothing</span>
</div>
<test-data-list label="Select" :options="groupList" v-model="result"></test-data-list>
</div>
I m new to Vue and stuck in a situation and don't know how to do that if anybody suggests me how I can do this let me show my code first
<div class="table-responsive-sm">
<vue-good-table
title="Shop List Table"
:columns="columns"
:rows="rows"
:paginate="true"
:lineNumbers="true"
:globalSearch="true" >
<template slot="table-row" slot-scope="props" ><a class="btn btn-sm primary" #on-row-click="onRowClick">save</a></template>
</vue-good-table>
and in script
data(){
return{
columns: [
{
label: 'Brand Name',
field: 'brand_name',
},
{
label: 'Brand Desc',
field: 'brand_desc',
},
{
label: 'Action',
field: 'before',
},
],
rows:[],
}
}
getTotals(){
var self = this;
var new1=[];
this.$http.get('/api/brands')
.then(function (response) {
self.rows=response.data
})
},
now my problem is that if I use
<span v-if="props.column.field == 'before'">
before
</span>
as suggested in this https://jsfiddle.net/aks9800/hsf0sqf8/ it throws an error like field not defined I just want to add an extra action button for edit this is vue-good table one more thing none of the action as suggested in this link for eg:- #on-row-click="onRowClick" not working
Try this
<div class="table-responsive-sm">
<vue-good-table
title="Shop List Table"
:columns="columns"
:rows="rows"
:paginate="true"
:lineNumbers="true"
:globalSearch="true" >
<template slot="table-row" slot-scope="props" >
<a class="btn btn-sm primary" #on-row-click="onRowClick">save</a>
</template>
<template slot="table-row" slot-scope="props">
<span v-if="props.column.field == 'actions'">
<a class="btn btn-sm primary" #on-row-click="onRowClick">save</a>
</span>
<span v-else>
{{props.formattedRow[props.column.field]}}
</span>
</template>
</vue-good-table>
</div>
data(){
return{
columns: [
{
label: 'Brand Name',
field: 'brand_name',
},
{
label: 'Brand Desc',
field: 'brand_desc',
},
{
label: 'Actions',
field: 'actions',
sortable: false,
}
],
rows:[],
}
}
getTotals(){
var self = this;
var new1=[];
this.$http.get('/api/brands')
.then(function (response) {
self.rows=response.data
})
},
Here is very good example how to add "edit" button in a row by marekfilip
https://jsfiddle.net/marekfilip/jm4ywzor/
html:
<div id="app">
<vue-good-table
:columns="columns"
:rows="rows" >
<template slot="table-row" slot-scope="props">
<span v-if="props.column.field == 'before'">
<button #click="editRow(props.row.id)">Edit</button>
<button #click="deleteRow(props.row.id)">Delete</button>
</span>
<span v-else>
{{props.formattedRow[props.column.field]}}
</span>
</template>
</vue-good-table>
<span>{{ text }}</span>
</div>
javascript
new Vue({
el: '#app',
data() {
return {
columns: [
{
label: 'Before',
field: 'before'
},
{
label: 'ID',
field: 'id',
sortable: true,
},
{
label: 'Text',
field: 'text',
type: 'number',
sortable: true,
},
],
rows: [
{ text: 'A', id: 1 },
{ text: 'B', id: 2 },
{ text: 'C', id: 3 },
{ text: 'D', id: 5 },
],
text: ''
};
},
methods: {
editRow(id) {
this.showAlert(id, 'EDIT')
},
deleteRow(id) {
this.showAlert(id, 'DELETE')
},
showAlert(id, type) {
this.text = `You clicked ${type} on row ID ${id}`
}
}
});