0

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

                     <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)
            );
        },
4

1 回答 1

0

我相信您正在使用来自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"and@input="getOccTypes"绑定您的值，然后提交更改getOccTypes并在商店中替换它valueMulti

于 2020-09-09T12:29:43.227 回答