【发布时间】：2019-08-12 09:38:49
【问题描述】：
我正在尝试在 Vue.JS 2 中设置单选按钮列表的选中值。我在这里查看了现有文章并尝试了它们以及几种不同的手动方法，但我根本无法让它工作。
我在这里没有使用 v-model，因为我正在处理表单构建器使用的自定义单选按钮列表控件。由于我正在构建一个嵌套的单选按钮列表来处理可为空的布尔值，这一事实使情况变得更加复杂。抛开复杂性不谈，我的无线电组件看起来像这样......
<template>
<div class="form__radio-list">
<span class="form__radio-list__intro">{{ introText }}</span>
<ul class="form__radio-list__options">
<li v-for="item in options"
:key="item.key ? item.key : item"
class="form__radio-list__options__item">
<input type="radio"
:id="item.key ? item.key.toKebabCase() : item.toKebabCase()"
:name="def"
:value="item.value != undefined ? item.value : item"
:disabled="disabled"
:checked="isChecked(item)"
@input="onInput"
@change="$emit('change', $event.target.checked)">
<label :for="item.key ? item.key : item">{{ item.text ? item.text : item }}</label>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
def: {
type: String,
required: true
},
introText: {
type: String,
default: ''
},
options: {
type: Array,
required: true
},
initialValue: {
type: [String, Number, Boolean],
default: null
},
disabled: {
type: Boolean,
default: false
}
},
data() {
return {
value: this.initialValue
}
},
methods: {
_parseValue() {
return this.value ? parseInt(this.value) : null
},
isChecked(item) {
const checked = item.value === this.value || item === this.value || item.value == this._parseValue()
this.$logger.logObject({ item, parentValue: this.value, checked }, 'Checking value for an item')
return checked
},
onInput($event) {
this.value = $event.target.checked
this.$emit('input', $event.target.checked)
}
}
}
</script>
从日志中我可以看到“checked”的值应该设置正确（但不是）。
我还尝试将输入标记拆分为“v-if”语句，这样我就有一个带有已检查参数集，而一个没有（虽然这感觉很糟糕），并且从 HTML 的角度来看是有效的（已检查 = “已选中”出现在我期望的位置）但是，在浏览器上，这两个选项都没有被选中。
我正在通过一个看起来像这样的布尔组件渲染器使用该组件...
<template>
<hh-radio class="form__radio-list--yes-no"
:def="def"
:intro-text="introText"
:options="options"
:initial-value="initialValue"
:disabled="disabled"
@change="$emit('change', $event)"
@input="$emit('input', $event)" />
</template>
<script>
export default {
props: {
def: {
type: String,
required: true
},
introText: {
type: String,
default: ''
},
initialValue: {
type: [String, Boolean],
default: null
},
disabled: {
type: Boolean,
default: false
}
},
computed: {
options() {
return [{
key: 'yes',
text: 'Yes',
value: true
}, {
key: 'no',
text: 'No',
value: false
}]
}
}
}
</script>
然后最终以这样的形式消费...
<hh-yes-no class="editable-segment-field__bool"
:def="pvc-enabled"
:initial-value="pvc.value"
@input="onInput" />
值传递似乎工作正常 - 我遇到的关键问题是它不会从任何现有数据中指定当前选定的项目。
我在这里尝试过建议 - Vue.JS radio input without v-model 和这里 - Vue.JS checkbox without v-model，但没有取得多大成功。
使用下面给出的示例，我已尝试尽可能地将其剥离，在确定问题根源时添加组件中的动态元素。
我现在有一个更简单的组件，看起来像这样......
<template>
<div :class="`form__radio-list ${(this.def ? `form__radio-list--${this.def} js-${this.def}` : '' )}`">
<span class="form__radio-list__intro">{{ introText }}</span>
<ul class="form__radio-list__options">
<li class="form__radio-list__options__item">
<input id="awesome"
type="radio"
name="isawesome"
:checked="radio === 'Awesome'"
value="Awesome"
@change="radio = $event.target.value">
<label for="awesome">Awesome</label>
</li>
<li class="form__radio-list__options__item">
<input id="super"
type="radio"
name="isawesome"
:checked="radio === 'Super Awesome'"
value="Super Awesome"
@change="radio = $event.target.value">
<label for="super">Super</label>
</li>
</ul>
<span>Selected: {{ value }} | {{ radio }}</span>
</div>
</template>
<script>
export default {
props: {
def: {
type: String,
required: true
},
introText: {
type: String,
default: ''
},
initialValue: {
type: [String, Boolean],
default: null
},
disabled: {
type: Boolean,
default: false
}
},
// delete this
data() {
return {
value: this.initialValue,
radio: 'Awesome'
}
},
computed: {
options() {
return [{
key: 'yes',
text: 'Yes',
value: true
}, {
key: 'no',
text: 'No',
value: false
}]
}
}
}
</script>
一旦我将name="isawesome" 添加到单选按钮项目中，我就设法让它失败。似乎当您引入“名称”时，出现了问题。当然，我需要“名称”来防止多个单选按钮列表相互交互，或者这是我不知道的 Vue 处理的东西。
【问题讨论】：
-
它是 html：当您拥有具有（相同）
nameattr 的收音机时，您定义一个隐式收音机组，其中最大 1 可以在给定时间检查 mdn-doc/input/radio -
是的@birdspider，这就是为什么我想在我的通用单选列表组件上命名，这样我就可以在每个页面上有多个单选按钮列表。问题是没有项目会检查是否指定了名称。