vue.js - 使用 Vue 读取动态生成的输入单选的值
问题描述
我需要使用 v-for 来动态创建一个列表,其中包含无线电类型的输入元素。当单击组中的单选按钮时,我需要将槽中的值传递给函数。根据该值(空档),患者将能够进行预约。
我尝试使用 v-model 来获取元素的值。但我发现我得到的是一个非插值字符串{{ slot }}
而不是值。是否可以将变量插入到输入表单元素的值属性中?当我尝试仅使用 v-model 而不设置值时,当我尝试查看 v-model 中使用的变量时,我得到了“on”作为值。
我的问题是我有一个插槽列表,每个插槽都有一个单选按钮。我想从单选按钮中获取插槽。我试过这个:
<div class="select2Buttons" id="selectRadioButtons">
<ul v-if="activezone=='morning'" class="select-buttons">
<li v-for="(slot, index) in morningslots" :key="index">
<label>
<input type="radio" name="selectedslot" value="{{ slot }}" v-model="selectedslot"/>
<span>{{ slot }}</span>
</label>
</li>
</ul>
<ul v-else-if="activezone=='afternoon'" class="select-buttons">
<li v-for="(slot, index) in afternoonslots" :key="index">
<label>
<input type="radio" name="selectedslot" v-model="selectedslot" value="{{ slot }}" />
<span>{{ slot }}</span>
</label>
</li>
</ul>
<ul v-else-if="activezone=='evening'" class="select-buttons">
<li href="#" v-for="(slot, index) in eveningslots" :key="index">
<label>
<input type="radio" name="selectedslot" v-model="selectedslot" value="{{ slot }}" />
<span>{{ slot }}</span>
</label>
</li>
</ul>
</div>
呈现的 html 如下所示:
<ul class="select-buttons" data-v-43dd0583="">
<li href="#" data-v-43dd0583=""><label data-v-43dd0583=""><input type="radio" name="selectedslot" data-v-43dd0583="" data-com.bitwarden.browser.user-edited="yes" value="{{ slot }}"><span data-v-43dd0583="">4:00 PM - 4:10 PM</span></label></li>
<li href="#" data-v-43dd0583=""><label data-v-43dd0583=""><input type="radio" name="selectedslot" data-v-43dd0583="" data-com.bitwarden.browser.user-edited="yes" value="{{ slot }}"><span data-v-43dd0583="">4:10 PM - 4:20 PM</span></label></li>
<li href="#" data-v-43dd0583=""><label data-v-43dd0583=""><input type="radio" name="selectedslot" data-v-43dd0583="" data-com.bitwarden.browser.user-edited="yes" value="{{ slot }}"><span data-v-43dd0583="">4:20 PM - 4:30 PM</span></label></li>
<li href="#" data-v-43dd0583=""><label data-v-43dd0583=""><input type="radio" name="selectedslot" data-v-43dd0583="" value="{{ slot }}"><span data-v-43dd0583="">4:30 PM - 4:40 PM</span></label></li>
<li href="#" data-v-43dd0583=""><label data-v-43dd0583=""><input type="radio" name="selectedslot" data-v-43dd0583="" value="{{ slot }}"><span data-v-43dd0583="">4:40 PM - 4:50 PM</span></label></li>
<li href="#" data-v-43dd0583=""><label data-v-43dd0583=""><input type="radio" name="selectedslot" data-v-43dd0583="" value="{{ slot }}"><span data-v-43dd0583="">4:50 PM - 5:00 PM</span></label></li>
<li href="#" data-v-43dd0583=""><label data-v-43dd0583=""><input type="radio" name="selectedslot" data-v-43dd0583="" value="{{ slot }}"><span data-v-43dd0583="">5:00 PM - 5:10 PM</span></label></li>
<li href="#" data-v-43dd0583=""><label data-v-43dd0583=""><input type="radio" name="selectedslot" data-v-43dd0583="" data-com.bitwarden.browser.user-edited="yes" value="{{ slot }}"><span data-v-43dd0583="">5:10 PM - 5:20 PM</span></label></li>
<li href="#" data-v-43dd0583=""><label data-v-43dd0583=""><input type="radio" name="selectedslot" data-v-43dd0583="" data-com.bitwarden.browser.user-edited="yes" value="{{ slot }}"><span data-v-43dd0583="">5:20 PM - 5:30 PM</span></label></li>
</ul>
零件代号:
watch: {
selectedDate: {
handler(newDate) {
console.log(`Watcher triggered for selectedDate. New value is`);
console.log(newDate);
console.log(this.selectedDate);
},
immediate: true,
deep: true,
},
selectedslot: {
handler(newSelectedSlot) {
console.log(`Watcher triggered for selectedslot. New value is`);
console.log(newSelectedSlot);
console.log(this.selectedslot);
},
immediate: true,
deep: true,
},
},
Console:
(When v-model alone used)
Watcher triggered for selectedslot. New value is
on
on
When value was set to {{ slot }}:
Watcher triggered for selectedslot. New value is
on
on
编辑:我能够用来@click="methodName(slot)
解决我的问题,而无需使用 v-model 或为输入元素设置值。
有效的代码:
<input type="radio" name="selectedslot" @click="setSelectedSlot(slot)" />
在我的方法中:
setSelectedSlot(slot) {
console.log(`Got value of slot as ${slot}`);
this.selectedslot = slot
},
但我无法放下我的感觉,一定有更好的东西。
解决方案
推荐阅读
- html - 如何自动从另一个应用程序中的 SignUpForm 表单模型中提供一个应用程序的客户模型中的数据?
- python - numpy.random 子包中没有定义 __all__ 的对象,但是导入时不会抛出任何错误
- java - Java中不同类的“列表”应该是什么参数化类型?
- powerbi - 引用的查询是否会导致再次获取数据?
- c# - 如何从转发器导出的 excel 中删除前两列和超链接
- perl - Async.pm 中的 AsyncTimeout 仅在完成异步进程执行后才给出超时
- python - 在括号之间提取什么正则表达式?
- python - 我正在与在 discord.py 中具有一定作用的 dming 成员作斗争
- xcode12 - macOS Big Sur - 运行任何项目或 .swift 文件时 Xcode 12.2/12.4 冻结
- winforms - 如何根据类型在列中显示不同的单元格?