我正在尝试制作一个 vueapp,当用户点击一个选项标签时设置一个属性。我正在尝试使用 v-on:click 但它没有用。有什么想法吗?
<div v-show="loggedin==1" class="searchBy">
<h2>Selected Display</h2>
<select v-model="selectedDisplayShapeText">
<option value="" disabled>Please Choose One</option>
<option v-for="display in displays" :value="display.shapetext" v-on:click="displayName=display.name">{{display.name}}</option>
</select>
</div>
最佳答案
您可以在 select 的 change
事件中检索选项:
new Vue({
el: "#app",
data() {
return {
displays: [{ name: "Display1", shapetext: "1" }, { name: "Display2", shapetext: "2" }, { name: "Display3", shapetext: "3" }],
selectedDisplayShapeText: '',
displayName: ''
}
},
methods: {
getDisplayName(e){
let value = e.target.value
let display = this.displays.find(d => d.shapetext == value)
this.displayName = display.name
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
<h2>Selected Display</h2>
<select v-model="selectedDisplayShapeText" v-on:change="getDisplayName($event)">
<option value="" disabled>Please Choose One</option>
<option v-for="display in displays" :value="display.shapetext">{{display.name}}</option>
</select>
<p>Display selected: {{ displayName }}</p>
</div>
关于vue.js - Vuejs v-on :click not working on option tag,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50727815/