[英]how to insert to database value from Vue MultiSelect
我使用我從此鏈接安裝的Vue MultiSelect創建了一個多選表單。https://www.npmjs.com/package/vue-search-select
這是我的表格
<form @submit.prevent="add" enctype="multipart/form-data">
<multi-select v-model="single.artistname" :options="artist"
:selected-options="items"
placeholder="select item"
@select="onSelect">
</multi-select>
</form>
這是我的數據返回
data() {
return {
files: [],
errors: [],
single: {},
image: '',
success: '',
artist: [],
searchText: '',
items: [],
lastSelectItem: {}
}
},
我的添加腳本
add(e) {
let formData = new FormData();
formData.append('artist[]', this.$data.single.artistname);
axios.post('/select-files', formData, config)
.then((response) => {
alert('Data Single Successfull Inserted.')
//this.$router.push('/single/');
})
}
如何使我的多選產生一個數組?
所以我可以通過控制器中的簡單循環將數據輸入數據庫。
多次選擇后,我們得到一個數組,只需將該數組轉換為json-data並將其存儲在文本數據類型為table-field的數據庫中
在訪問期間,將相同的json數據反向轉換為數組並進一步處理
您可以使用json_encode()和json_decode()php函數
我對復選框做了同樣的事情
<b-form-checkbox-group id="checkboxes2" name="flavour2" v-model="cat_id">
<b-col sm='6' v-for="item in categories" :key='item.id'>
<b-form-checkbox v-bind:value="item.id">{{ item.category }}</b-form-checkbox><br/>
<b>Details:</b> <span>{{ item.item_details }}</span>
</b-col>
</b-form-checkbox-group>
數據
data() {
return {
errors:[],
cat_id:[],
}
}
最后
formData.append('cat_id', cat_id);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.