Vue-Multiselect 从数据库中获取数据

Posted 2023-03-11

【中文标题】Vue-Multiselect 从数据库中获取数据

【英文标题】：Vue-Multiselect Get data from database

【发布时间】：2020-09-09 11:48:02

【问题描述】：

这里我想动态地从数据库中获取数据，为此我写了这个

                     <div class="btn-group">
                        <div>
                            <label class="typo__label">Occupancy Group</label>
                            <multiselect v-model="valueMulti" 
                            tag-placeholder="Add this as new tag" 
                            placeholder="Search Occupancy type" 
                            label="name" 
                            track-by="code" 
                            :options="optionsMulti" 
                            :multiple="true" 
                            :taggable="true" 
                            @change="getOccTypes"
                            @tag="addTag"></multiselect>                            
                        </div>
                    </div>

在脚本中，如何将这些值替换为数据库中的值？

valueMulti: [
         name: 'javascript', code: 'js' 
      ],
      optionsMulti: [
         name: 'Vue.js', code: 'vu' ,
         name: 'Javascript', code: 'js' ,
         name: 'Open Source', code: 'os' 
      ],

最后是我写的从数据库中获取数据的方法，

getOccTypes() 
            axios.get("/customer/application-types/2").then(
                function(response) 
                    this.occTypes = response.data;
                .bind(this)
            );
        ,

【参考方案1】：

我相信你正在使用来自 https://vue-multiselect.js.org/

的 vue-multiselect

他们已经给出了一个详细的例子来说明他们是如何做到的

*从https://vue-multiselect.js.org/复制的代码*

<div>
  <label class="typo__label">Vuex example.</label>
  <multiselect placeholder="Pick action" :value="value" :options="options" :searchable="false" @input="updateValueAction"></multiselect>
</div>

import Vue from 'vue'
import Vuex from 'vuex'
import Multiselect from 'vue-multiselect'

const  mapActions, mapState  = Vuex

Vue.use(Vuex)

const store = new Vuex.Store(
  state: 
    value: 'Vuex',
    options: ['Vuex', 'Vue', 'Vuelidate', 'Vue-Multiselect', 'Vue-Router']
  ,
  mutations: 
    updateValue (state, value) 
      state.value = value
    
  ,
  actions: 
    updateValueAction ( commit , value) 
      commit('updateValue', value)
    
  
)

export default 
  store,
  components: 
    Multiselect
  ,
  computed: 
    ...mapState(['value', 'options'])
  ,
  methods: 
    ...mapActions(['updateValueAction'])
  

在您的情况下，您可以使用 :value="valueMutli" 和 @input="getOccTypes" 绑定您的值，然后在您的 getOccTypes 中提交更改并在商店中将其替换为 valueMulti