组件 vue-multiselect- 在加载时不获取值
Component vue-multiselect- doesn't fetch value on load
加载组件时,我需要select下拉列表中的值
我正在努力让我的代码成为 vue-multi 的朋友select
找到了一个类似的主题 - 但是,该字段中没有任何内容 - 如果你 select 一个值,一切正常
其实我要通过axios下载,mini版是这样的
import Multiselect from "vue-multiselect";
export default {
components: {
Multiselect
},
data() {
return {
books: [],
selectedBook: null,
};
},
created() {
this.getBooks();
this.getFav();
},
methods: {
//through axios I get the model and pass it to the list component
getBooks() {
this.books = [
{ id: 1, name: "ABC" },
{ id: 2, name: "QWE" }
];
},
getFav() {
//through axios I get the Id of the model for editing
let responseId = 1;
this.selectedBook = responseId;
},
<template>
...
<multiselect
v-model="selectedBook"
:options="books"
:selected="selectedBook"
track-by="id"
label="name"
:show-labels="false"
placeholder="Choose your book">
<span slot="noResult">No books were found</span>
</multiselect>
<pre class="language-json"><code>{{ selectedBook }}</code></pre>
...
</template>
但是当加载并打开表单时 - select 框中没有任何内容,
如果您从列表中做出选择,模型就会改变
我做错了什么?
您只忘记了一行代码:在您的多选标记中添加 v-model="selectedBook"
,如
<multiselect
:options="books"
:selected="selectedBook"
:show-labels="false"
track-by="id"
label="name"
placeholder="Choose your book"
v-model="selectedBook"
>
并且如果您希望在加载组件时已经选择了一本书(因此默认书籍,例如第一本书)。您必须修改创建组件时调用的 getFav() 函数:
getFav() {
var fav = 1; /*id of the book to display*/
var defaultIndex = this.books.findIndex(x => x.id === fav);
this.selectedBook = this.books[defaultIndex];
}
如评论中所述,您可以将对象本身传递给this.selectedBook
。我建议你这样写 getFav
函数:
getFav() {
let responseId = 2; // get the id from axios, for example 2
let displayedItem = null;
// map the books array to find the corresponding item id
this.books.map(item => {
if(item.id === responseId) {
this.displayedItem = item;
};
});
this.selectedBook = this.displayedItem;
}
加载组件时,我需要select下拉列表中的值
我正在努力让我的代码成为 vue-multi 的朋友select
找到了一个类似的主题 - 但是,该字段中没有任何内容 - 如果你 select 一个值,一切正常
其实我要通过axios下载,mini版是这样的
import Multiselect from "vue-multiselect";
export default {
components: {
Multiselect
},
data() {
return {
books: [],
selectedBook: null,
};
},
created() {
this.getBooks();
this.getFav();
},
methods: {
//through axios I get the model and pass it to the list component
getBooks() {
this.books = [
{ id: 1, name: "ABC" },
{ id: 2, name: "QWE" }
];
},
getFav() {
//through axios I get the Id of the model for editing
let responseId = 1;
this.selectedBook = responseId;
},
<template>
...
<multiselect
v-model="selectedBook"
:options="books"
:selected="selectedBook"
track-by="id"
label="name"
:show-labels="false"
placeholder="Choose your book">
<span slot="noResult">No books were found</span>
</multiselect>
<pre class="language-json"><code>{{ selectedBook }}</code></pre>
...
</template>
但是当加载并打开表单时 - select 框中没有任何内容,
如果您从列表中做出选择,模型就会改变
我做错了什么?
您只忘记了一行代码:在您的多选标记中添加 v-model="selectedBook"
,如
<multiselect
:options="books"
:selected="selectedBook"
:show-labels="false"
track-by="id"
label="name"
placeholder="Choose your book"
v-model="selectedBook"
>
并且如果您希望在加载组件时已经选择了一本书(因此默认书籍,例如第一本书)。您必须修改创建组件时调用的 getFav() 函数:
getFav() {
var fav = 1; /*id of the book to display*/
var defaultIndex = this.books.findIndex(x => x.id === fav);
this.selectedBook = this.books[defaultIndex];
}
如评论中所述,您可以将对象本身传递给this.selectedBook
。我建议你这样写 getFav
函数:
getFav() {
let responseId = 2; // get the id from axios, for example 2
let displayedItem = null;
// map the books array to find the corresponding item id
this.books.map(item => {
if(item.id === responseId) {
this.displayedItem = item;
};
});
this.selectedBook = this.displayedItem;
}