vue.js - Vuejs v-on:单击不适用于选项标签
问题描述
大家好,所以我正在尝试制作一个在用户单击选项标签时设置属性的 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>
解决方案
change
您可以在select 事件中检索选项:
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>
推荐阅读
- huggingface-transformers - 抑制 HuggingFace 日志记录警告:“将 `pad_token_id` 设置为 `eos_token_id`:{eos_token_id} 以进行开放式生成。”
- java - 如何在我的 toString 方法中修复我的输出?
- winui-3 - 在“AcrylicBrush”WinUI 类型中找不到属性“backgroundsource”
- webpack - 如何在 quasar js 框架中启用 webpack 实验选项?
- shell - linux中的可执行文件使用(perm)?
- r - 如何计算r中的残差
- performance - 为什么在最坏的情况下,进位超前加法器被认为比波纹进位更好?
- python - RuntimeError:事件循环已关闭 - JanusGraph
- php - VS Code 上的 intelephense 错误:预期类型为“字符串”。找到'字符串 []'
- reactjs - React + GSAP:动画元素onClick