在发生更改后，Select不更新。
在发生更改后，Select不更新。
提问于 2022-09-29 07:02:31
我将Nuxt.js与Buefy结合使用，并有一个带有选项的select dropdown。我使用v-model和@input.native="options(selectedOptions.windowsLicence)"进行了反应性，但是我现在试图将数据添加到order对象中。因此，它显示的是变更的最后一个选择值，而不是更新的值，即使我的v-模型被更新了。
我是否需要让一个观察者来观察这个问题，还是我可以在一个计算方法中这样做呢？
方法
options(val){
let selectedOption = {
id:'54',
title: this.selectedOptions.windowsLicence.label,
price: this.selectedOptions.windowsLicence.price
}
this.order.windowsLicence = selectedOption;
},下拉
<b-field class="pt-3">
<b-select
placeholder="None - $0.00"
expanded
@input.native="options(selectedOptions.windowsLicence)"
v-model="selectedOptions.windowsLicence"
icon="windows"
icon-pack="fab"
size="is-medium">
<optgroup>
<option v-for="(licence, key, index) in serverOptions.windowsLicences" :key="index" :value="{ 'id':licence.id, 'label':licence.label, 'price':licence.price }">{{licence.label}} - ${{licence.price}}.00</option>
</optgroup>
</b-select>
</b-field>数据属性-具有反应性
{{selectedOptions.windowsLicence}}添加到顺序的在选择的中落后了1步
{{order}}回答 1
Stack Overflow用户
回答已采纳
发布于 2022-09-29 07:19:17
v-model是在一个指令中添加@input和:value的快捷方式。
医生：https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components.
将.native添加到事件处理程序意味着侦听实际的DOM元素事件，而不是Vue组件事件。
<b-select />呈现没有input事件的<div>。
假设您对单击<b-select />感兴趣。
<b-select />不执行$emit('click')事件，因此不能执行@click="doSomethingWhenClicked"
那就是你使用<b-select @click.native="doSomethingWhenClicked" />的时候
若要回答如何对选定的值作出反应，
你既可以做观察者也可以做方法。
守望者
<template>
<b-select v-model="selected" />
</template>
<script>
...
data() {
return {
selected: null
}
},
watch: {
selected(newValue, oldValue) {
// Do something here
}
}
</script>方法
<template>
<b-select :value="selected" @input="onSelect" />
</template>
<script>
...
data() {
return {
selected: null
}
},
methods: {
onSelect(selectedValue) {
this.selected = selectedValue
// Do something here
}
}
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73891503
复制相关文章
相似问题
腾讯云开发者
