使用 Vue 读取动态生成的输入单选的值

Question

我需要使用 v-for 来动态创建一个列表，其中包含 radio 类型的输入元素。当单击组中的单选按钮时，我需要将槽中的值传递给函数。根据此值（空档），患者可以进行预约。

我尝试使用 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

},

但我无法放下自己的感觉，一定有更好的东西。

Answer 1

您当前拥有value="{{ slot }}"，它将单选按钮的值设置为文字字符串"{{ slot }}"。

要绑定value，请使用v-bind directive（或其: 简写）：

<input type="radio" :value="slot" v-model="selectedSlot">

demo