So lets say i have a data - news: {id:3, name:"book", author:'author'}.
And select with options: {id: 1, book: "book1"}, {id: 2, book: "book2"} .
Now i want to v-bind options with news.id and news.book Is there a way of doing it or ready component for this?
<select v-model="selected">
<option v-for="option in options" :value="option.id">
{{ option.name}}
</option>
</select>
data() {
return {
selected: 1,
options: [
{ name: 'book1', id: 1 },
{ name: 'book2', id: 2 },
{ name: 'book3', id: 3 }
]
}
So in the end i made this:
<select1
:selected="{ id: book.id, name: book.name }"
v-model:id="book.id"
v-model:name="book.name"
urldata="url/to/get/options"
></select1>
And my component look like this:
<template>
<div>
<select v-model="selected" @change="change" class="form-select">
<option v-for="option in options" :value="option">
{{ option.name }}
</option>
</select>
</div>
</template>
export default {
name: "select1",
emits: ["update:selected", "update:id", "update:name"],
props: {
selected: Object,
urldata: String,
},
data: function () {
return {
options: [],
};
},
mounted() {
this.GetListData();
},
methods: {
GetListData() {
if (this.urldata !== "") {
axios
.get(`${this.urldata}`)
.then((response) => (this.options = response.data.results));
}
},
change(event) {
console.log(this.selected);
this.$emit("update:selected", this.selected);
this.$emit("update:id", this.selected.id);
this.$emit("update:name", this.selected.name);
},
},
};