У меня есть документ со многими полями ввода. Некоторые из них зависят от другого, т. Е. Когда в первом поле ввода выбрана опция, вторая должна предоставлять соответствующие опции на основе запроса к базе данных. Это отлично работает.
Теперь я хочу добавить для второго поля ввода пустую опцию, которая должна оставаться выбираемой при выборе первой опции.
Пока у меня есть это решение:
<template>
<div>
<label for="ed_kbid" class="control-label">Bereich</label>
<select2 v-model="bereichId":options="bereiche" name="ed_kbid">
<option disabled selected value="0">Select one</option>
</select2>
</div>
</template>
Но «Выбрать один» исчезает, когда в первом поле что-то выбрано.
Как я могу сделать его постоянным?
Спасибо!
редактирование:
<script>
import JQuery from 'jquery'
import Select2 from '@/components/Select2.vue'
let $ = JQuery
export default {
name: 'Bereich',
components: {
Select2
},
data: function () {
return {
bereiche: [],
kundeUebertrag: '',
bereichId: 0
}
},
computed: {
kundeInputStore: function()
{
return this.$store.state.kundeInputStore
}
},
watch:{
kundeInputStore: function() {
let vm = this;
vm.kundeUebertrag = vm.kundeInputStore;
$.getJSON("/api/get_bereich.php", {kundeUebertrag:
this.kundeUebertrag } , function(result){
vm.bereiche = result;
});
},
bereichId: function(value){
this.$store.commit('setBereichInput', value)
}
},
}
и компонент Select2:
<template>
<select class="form-control" >
<slot></slot>
</select>
</template>
<script>
import JQuery from 'jquery'
let $ = JQuery
export default {
name: 'select2',
props: ['options', 'value'],
mounted: function () {
var vm = this
$(this.$el)
// init select2
.select2({
data: this.options,
tags:true
})
// emit event on change.
.on('change', function () {
vm.$emit('input', this.value)
})
console.log( $(this.$el))
},
watch: {
value: function (value) {
// update value
//console.log(value)
$(this.$el)
.val(value)
.trigger('change')
},
options: function (options) {
// update options
$(this.$el).empty().select2({data: options,tags: true})
}
},
destroyed: function () {
$(this.$el).off().select2('destroy')
}
}