javascript VueJS：带有动态值的输入 + v-model
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48086973/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
VueJS: input with dynamic value + v-model
提问by ppalmeida
I have a problem with VueJS when setting the value of an input radio AND v-model. I cant understand why I can not setting dynamically a value to an input and use a model to retrive what input the user selected.
在设置输入无线电和 v-model 的值时，我遇到了 VueJS 问题。我不明白为什么我不能为输入动态设置值并使用模型来检索用户选择的输入。
In code is easier to understand:
在代码中更容易理解：
export default {
props: ["question", "currentQuestion"],
data() {
return {
answer: undefined
}
},
computed: {
isCurrent() {
return this.currentQuestion && this.currentQuestion.id == this.question.id;
}
},
methods: {
groupName(question) {
return 'question_id_' + question.id
},
inputType(question) {
if (question.question_type_id == 2) return "checkbox";
return "radio";
}
},
mounted() {
console.log('Component mounted.')
}
}<template>
<ul v-if="question.question_type_id != 4">
<li v-for="option in question.options" :key="option.id">
<div class="form-group">
<label>
<input v-model="answer" :value="option.id" :type="inputType(question)"
:name="groupName(question)" />
{{option.option}}
</label>
</div>
</li>
</ul>
</template>So, in case there are 4 options, the user would see 4 radio buttons, each one with the "option.id" as a value and, WHEN the user clicks the radio button, the model "answer" would be populated with that value.
因此，如果有 4 个选项，用户将看到 4 个单选按钮，每个单选按钮都以“option.id”作为值，当用户单击单选按钮时，模型“answer”将填充该值.
Now, when I try to compile this file, I get this error message:
现在，当我尝试编译此文件时，收到此错误消息：
- :value="option.id" conflicts with v-model on the same element because the latter already expands to a value binding internally
- :value="option.id" 在同一个元素上与 v-model 冲突，因为后者已经在内部扩展为值绑定
So, could anyone help me understand how do I dynamically set a value to an input AND asssociate a model to retrieve the value when the input is selected?
那么，任何人都可以帮助我了解如何动态地为输入设置值并关联模型以在选择输入时检索该值？
By the way, VueJS documentation at this page says exactly what I am trying to do: https://vuejs.org/v2/guide/forms.html
顺便说一句，此页面上的 VueJS 文档准确地说明了我正在尝试做的事情：https://vuejs.org/v2/guide/forms.html
Any help is very appreciated.
非常感谢任何帮助。
采纳答案by Bert
The main issue here is that you have a dynamic type on the input element, so I expect Vue is getting a little confused. valueis not valid in combination with v-modelfor a checkbox input, unless you are binding to an array.
这里的主要问题是你在 input 元素上有一个动态类型，所以我预计 Vue 会有点困惑。value与v-model复选框输入组合无效，除非您绑定到数组。
You can solve that by using a v-if/v-else.
你可以通过使用 v-if/v-else 来解决这个问题。
<label>
<input v-if="question.question_type_id == 2"
v-model="answer"
type="checkbox"
:name="groupName(question)" />
<input v-else
v-model="answer"
:value="option.id"
type="radio"
:name="groupName(question)" />
{{option.option}}
</label>
Working example.
工作示例。
There are other issues, but this addresses the error you mention in the question. For one, it doesn't make much sense for more than one checkbox to be bound to a single v-model, unless you are binding to an array. In that case, you would have to swap what type answeris based on whether is a radio, a checkbox with a single value or a checkbox with multiple values. Seems like it would get complicated.
还有其他问题，但这解决了您在问题中提到的错误。一方面，将多个复选框绑定到单个 没有多大意义v-model，除非您绑定到数组。在这种情况下，您必须answer根据是收音机、具有单个值的复选框还是具有多个值的复选框来交换类型。好像会变得复杂。
回答by x-magix
the proper way is to use placeholder.
正确的方法是使用占位符。
<input :placeholder="option.id" v-model="answer" @input="functionToChangeValue($event)"/>
! DO NOT USE VALUE AND V-MODEL TOGETHER it is because v-model create two way biding and your code brake
！不要同时使用价值和 V 模型，因为 v 模型创建了两种方式的投标和您的代码刹车
