如何在Vue js代码中触发下拉更改事件?

Question

我想在Vue js方法中触发下拉菜单更改事件。

<select id="idDropdown" v-model="Result.Value" v-on:change.prevent="changeSelection($event, 'somevalue')">

现在我如何在任何vue js方法中的下拉按钮更改代码时调用上述changeSelection()方法。如何传递$event变量

我有2下拉按钮，当模型值通过像这样的代码改变结果。值= 10，那么我想触发changesselection方法，在第二个下拉列表中绑定一些数据。

Answer 1

您不需要自己运行changeSelection，当所选选项发生变化时，它将自动调用。

你也不需要.prevent修饰符

如果你在select之外以编程方式设置选定选项，那么你将需要一个监视器来调用你的函数。

watch: {
selected(newVal, oldVal) {
this.changeSelection(null,newVal)
}
}

const { createApp } = Vue
const App = {
data() {
return { selected: null }
},
methods: {
changeSelection(event, value) {
if (event != null) console.log("event.target.value: " + event.target.value)
console.log("value: " + value)
}
},
watch: {
selected(newVal, oldVal) {
this.changeSelection(null,newVal)
}
}
}
const app = createApp(App)
app.mount('#app')

#app { line-height: 1.75; }
[v-cloak] { display: none; }

<div id="app">
Select: <select v-model="selected" v-on:change="changeSelection($event, 'somevalue')">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select><br/>
Selected: {{selected}}<br/>
<button @click="selected = 0">Set 0</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>