[英]Vue select box, pre-select with one option and fill options with array from different axios call
[英]Axios call, getting response data into select options with vue
我在這里要做的只是弄清楚如何將響應數據值綁定到我的多options
但是我無法弄清楚自己在做什么錯。
控制台日志正確顯示了我返回的結果,因此我知道它們已返回,但是我不知道如何將它們綁定到我的多選選項中。
例如,如果我在多選中鍵入“ Day”,則axios調用將執行自動完成功能並獲取匹配選項,因此控制台將顯示:
0:
tag_id: "1001"
tag_data: "First Day"
1:
tag_id: "1002"
tag_data: "Second Day"
那么如何將那些返回的值放入我的選項中呢?
<div id="tagApp">
<multiselect
v-model="value"
:options="options"
:loading="loading"
:multiple="true"
:taggable="true"
@search-change="val => read(val)"
></multiselect>
</div>
new Vue({
components: {
Multiselect: window.VueMultiselect.default
},
el: "#tagApp",
data() {
return{
value: [],
loading: false,
options: []
}
},
methods: {
read: function(val){
//console.log('searched for', val);
if (val) {
this.loading = true;
this.options = [];
const self = this;
console.log(val);
axios.get('campaigns/search',{params: {query: val}})
.then(function (response) {
self.options = response.data;
console.log(response.data);
});
} else {
this.options = [];
}
}
}
})
由於您使用對象作為選項,因此需要將label
和track-by
屬性傳遞給multiselect組件。 在這里查看文檔
<multiselect
v-model="value"
label="tag_data"
track-by="tag_id"
:options="options"
:loading="loading"
:multiple="true"
:taggable="true"
@search-change="val => read(val)"
></multiselect>
您需要添加label
屬性以及track-by
屬性。 在我的示例中, title
是我用作options
的對象的屬性,因此您需要使用在用作options
的數組中存在的屬性名稱。
CodePen鏡像: https ://codepen.io/oze4/pen/ROVqZK ? editors = 1010
Vue.component("multiselect", window.VueMultiselect.default); new Vue({ el: "#app", data: { value: [], options: [] }, mounted() { var self = this; axios .get("https://jsonplaceholder.typicode.com/todos?_start=1&_end=10") .then(response => { self.options = response.data; }) .catch(error => { alert(error); }); } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script> <script src="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css"> <div id="app"> <label class="typo__label">Simple select / dropdown</label> <multiselect v-model="value" :height="300" :options="options" :multiple="true" :close-on-select="false" :clear-on-select="false" :preserve-search="true" placeholder="Pick some" label="title" track-by="title" :preselect-first="false" > <template slot="selection" slot-scope="{ values, search, isOpen }"><span class="multiselect__single" v-if="values.length && !isOpen">{{ values.length }} options selected</span></template> </multiselect> <pre class="language-json"><code>{{ value }}</code></pre> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.