I am trying to set the selected value of my v-select ponent in a method in the script part. These are the the code parts:
<v-flex xs4>
<v-select v-model="selected" :items="items" item-text="name"
item-value="value" outlined class="ml-2 mr-1" return-object></v-select>
</v-flex>
and the part of the script:
export default {
return{
data: function () {
items: [
{ name: 'item 1', value: 1 },
{ name: 'item 2', value: 2 },
{ name: 'item 3', value: 3 }],
selected: { name: 'iteam 1', value: 1 }
},
methods: {
apply (ponent) {
for (var i in this.items.entries()) {
if (i.name === ponent.item) {
this.selected.name = i.name
this.selected.value = i.value
}
}
}
}
}
}
I've tried different versions like
this.selected = i
this.selected[name] = i.name
this.selected[value] = i.value
this.selected = { i.name, i.value }
but nothing is working.
I am trying to set the selected value of my v-select ponent in a method in the script part. These are the the code parts:
<v-flex xs4>
<v-select v-model="selected" :items="items" item-text="name"
item-value="value" outlined class="ml-2 mr-1" return-object></v-select>
</v-flex>
and the part of the script:
export default {
return{
data: function () {
items: [
{ name: 'item 1', value: 1 },
{ name: 'item 2', value: 2 },
{ name: 'item 3', value: 3 }],
selected: { name: 'iteam 1', value: 1 }
},
methods: {
apply (ponent) {
for (var i in this.items.entries()) {
if (i.name === ponent.item) {
this.selected.name = i.name
this.selected.value = i.value
}
}
}
}
}
}
I've tried different versions like
this.selected = i
this.selected[name] = i.name
this.selected[value] = i.value
this.selected = { i.name, i.value }
but nothing is working.
Share Improve this question edited Jul 2, 2019 at 15:56 as19aux asked Jul 2, 2019 at 14:53 as19auxas19aux 1331 gold badge3 silver badges9 bronze badges 4- You need that on load or @change? – mare96 Commented Jul 2, 2019 at 15:45
-
in single file ponents you need to define data as a function, which you have, and return the data, which have not.
data: function(){ return{items:[...]} }or did you make an error when typing in your code? – skribe Commented Jul 2, 2019 at 15:50 - @skribe sorry that was only a typo, i do have the return statement – as19aux Commented Jul 2, 2019 at 15:55
- you dont need some function to do it, just write well -> selected: { name: 'item 1', value: 1 } instead of selected: { name: 'iteam 1', value: 1 } – Christian Carrillo Commented Jul 2, 2019 at 16:35
3 Answers
Reset to default 4It's and old question but Let me post my answer to help others as well, after alot of search I have e to this point, and I want to share it with others as well.
//This will load all your items in dropdown
<v-select
v-model="selected"
:items="items"
item-text="name"
item-value="value"
label="Select Item"
dense>
</v-select>
Now Edit Part
Lets say you want to edit a record, so you will probably pass the record id in edit method of your vuejs then inside edit method of vuejs, you will do an edit axios call for that specific record to first show it inside fields and then you will update. But before update you need to do something inside edit method of your vuejs when you will have already loaded data for that specific id.
Now lets say you have received a record from database according to a specific id, you will see a dropdown id I mean to say a foreign key for a dropdown that you had saved during storing data.
Suppose you have items array which holds whole data for a dropdown. Inside this you are having an value and name fields. So you have this items array and an object from database during edit for a specific record. Now you are good to go with below code.
Inside Edit Method of vuejs
//item_id it is like a foreign key for dropdown you have in your table
this.selected = this.items.find(item => item.value === parseInt(res.data.item_id))
this.selected = parseInt(this.selected.item_id)
Note: I am doing parseInt() it's because when you check in console the primary key is an integer like 1 but foreign key like rating_id is string i-e "1". You can also use two equals == if you are not using parseInt() but I haven't checked that.
For clearly understanding I am just sharing a sample edit code which might help you a bit
editItem(id){
axios.get( `/api/category/${id}` ).then( res => {
if(res.data.status === 200){
console.log(res.data.data)
this.name = res.data.data.name
this.id = res.data.data.id
this.parent_id = this.list_categories.find(item => item.id === parseInt(res.data.data.parent_id))
this.parent_id = parseInt(this.parent_id.id)
this.edited = true
}else{
this.$toaster.error( res.data.message )
}
});
}
Here's a plete example:
new Vue({
el: '#app',
data () {
const items = [
{ name: 'item 1', value: 1 },
{ name: 'item 2', value: 2 },
{ name: 'item 3', value: 3 }
]
return {
items,
selected: items[1]
}
},
methods: {
apply (ponent) {
this.selected = this.items.find(item => item.name === ponent.item)
}
}
})<link href="https://fonts.googleapis./css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://unpkg./[email protected]/dist/vuetify.css" rel="stylesheet">
<script src="https://unpkg./[email protected]/dist/vue.js"></script>
<script src="https://unpkg./[email protected]/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-flex xs4>
<v-btn
v-for="item in items"
:key="item.value"
@click="apply({item: item.name})"
>
{{ item.name }}
</v-btn>
<v-select
v-model="selected"
:items="items"
item-text="name"
item-value="value"
outlined
class="ml-2 mr-1"
return-object
></v-select>
</v-flex>
</v-app>
</div>In your original code the apply method seemed to be expecting to be passed an object (ponent) with an item property that matched the name of one of the items. I've tried to preserve that behaviour though it isn't clear why you would want that. Typically the value used for item-value would be the underlying id value used behind the scenes, not the item-text.
Rather than trying to copy values around between objects I've treated the 3 values in items as canonical and ensured that selected is always set to one of those 3. Not merely an object with the same values but actually one of those objects. This isn't strictly required but it seemed like the easiest way to me.
You need to set selected all at once, like this.selected = { name: 'item 3', value: 3 }
I changed the parameter type of apply for testing to string but it should look something like:
apply (ponent) {
temp={}
this.items.forEach((i)=> {
if (i.name === ponent) {
temp.name = i.name;
temp.value = i.value;
}
});
this.selected=temp
}
and I called apply with a btn
<v-btn v-for="n in 3" @click="apply(`item ${n}`)">Apply {{n}}</v-btn>