Question

当我懒于使用v-bind将选项的属性动态绑定到模板时，单选按钮的行为与我预期的不同。

我正在尝试通过javascript对象动态呈现选项。但是，当我绑定不同的属性时，它的行为也有所不同。即使在检查了输出HTML之后，我也不知道为什么会出现此问题。

这是后端数据的Vue实例。

const app = new Vue({
        el: '#app',

        data: {
            inputs: {
                radioDynamic: '',
                radioDynamicOptions: [
                    {
                        id: 'Light',
                        label: 'Blue',
                        value: 'Light',
                    },
                    {
                        id: 'Dark',
                        label: 'Red',
                        value: 'Dark',
                    },
                ],
            },
        },
        template: `
        <div>
            <h4>Radios Dynamic Options</h4>

            <!-- case 1: It works fine when I bind properties individually> 

            <template v-for="(option, index) in inputs.radioDynamicOptions">
                <input v-model="inputs.radioDynamic" type="radio" :value="option.value" :id="option.value">
                <label :for="option.value">{{ option.label }}</label>
                <br v-if="index < inputs.radioDynamicOptions.length">
            </template>
            -->

            <!-- case 2: the options are rendered as a single radio button which is not able to function correctly when I bind the object directly with v-bind="object". 

            <template v-for="(option, index) in inputs.radioDynamicOptions">
                <input v-model="inputs.radioDynamic" type="radio" v-bind="option">
                <label :for="option.value">{{ option.label }}</label>
                <br v-if="index < inputs.radioDynamicOptions.length">
            </template>
            -->

            <p><strong>Radios:</strong>{{ inputs.radioDynamic }}</p>
        </div>
        `,
})




<case 1 HTML output>
<h4>Radios Dynamic Options</h4> 
<input type="radio" id="Light" value="Light"> 
<label for="Light">Blue</label> 
<br>
<input type="radio" id="Dark" value="Dark"> 
<label for="Dark">Red</label> 
<br> 
<p><strong>Radios:</strong>Dark</p>

<case 2 HTML output>
<h4>Radios Dynamic Options</h4> 
<input type="radio" id="Light" label="Blue" value="Light"> 
<label for="Light">Blue</label> 
<br>
<input type="radio" id="Dark" label="Red" value="Dark"> 
<label for="Dark">Red</label> 
<br> 
<p><strong>Radios:</strong></p>

我希望使用v-bind =“ object”的情况2方法应生成与v-bind：id =“ object.id”类似的结果v-bind：value =“ object.value” 但事实证明，我无法单独选择单选按钮，并且所选值未推送到数组中。

这是我的第一个问题。如果我的表达或格式不佳或不合格，请原谅。谢谢，祝你有美好的一天〜

Answer 1

不确定在这里要实现什么，但是我建议您回顾一下v-bind和v-model的功能。 v-bind允许将动态数据传递到html属性。 v-on允许侦听DOM事件，而v-model产生所谓的-双向数据绑定，这基本上是v-bind和v-on的结合。话虽如此，在同一元素上同时使用v-model和v-bind感觉有点奇怪。

您可以通过以下方式在第二种情况中实现所需的目标：

 <template v-for="(option, index) in inputs.radioDynamicOptions">
      <input v-model="inputs.radioDynamic" type="radio" v-bind:value="option.id">
      <label :for="option.value">{{ option.label }}</label>
      <br v-if="index < inputs.radioDynamicOptions.length">
 </template>

更新：

我认为，您遇到的问题是对象（您可以了解更多关于here）和原始类型之间的一个主要差异的结果。长话短说，在JavaScript基本类型（如您在情况1中传递的字符串）通过值传递的情况下，其行为符合预期。在将对象传递到v-bind时，实际上是将指针传递到该对象，因此，当单击单选按钮时，您将在内存中控制这两个单选按钮的位置相同，从而导致您遇到意外的行为。< / p>

Answer 2

为什么您期望v-bind="options"将在<input/>上运行？此表单仅用于自定义组件。

来自documentation：

组件深度→道具→传递对象的属性

如果要传递对象的所有属性作为道具，则可以使用不带参数的v-bind（v-bind而不是v-bind:prop-name）。例如，给定一个post对象：
post: {
  id: 1,
  title: 'My Journey with Vue'
}
以下模板：
<blog-post v-bind="post"></blog-post>
将等同于：
<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title">
</blog-post>

如果要将动态/ javascript值绑定到常用元素，则应使用:value="option.value" :id="option.id"，如第一个示例所示。

单选按钮中的v-bind对象的属性无法正确呈现

2 个答案: