VueJS：输入动态值+ v-model

Posted 2023-02-16

【中文标题】VueJS：输入动态值+ v-model

【英文标题】：VueJS: input with dynamic value + v-model

【发布时间】：2018-06-13 16:39:30

【问题描述】：

在设置输入单选和 v-model 的值时，我遇到了 VueJS 的问题。我不明白为什么我不能为输入动态设置值并使用模型来检索用户选择的输入。

在代码中更容易理解：

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>

因此，如果有 4 个选项，用户会看到 4 个单选按钮，每个单选按钮都有“option.id”作为值，当用户单击单选按钮时，模型“答案”将被填充具有该值。

现在，当我尝试编译此文件时，我收到以下错误消息：

:value="option.id" 在同一元素上与 v-model 冲突，因为后者已经在内部扩展为值绑定

那么，任何人都可以帮助我了解如何为输入动态设置值并关联模型以在选择输入时检索值？

顺便说一下，这个页面上的 VueJS 文档准确地说明了我想要做的事情： https://vuejs.org/v2/guide/forms.html

非常感谢任何帮助。

【问题讨论】：

vuejs.org/v2/guide/…

【参考方案1】：

正确的方法是使用占位符。

<input :placeholder="option.id" v-model="answer" @input="functionToChangeValue($event)"/>

！不要同时使用价值和 V 模型 这是因为 v-model 创建了双向竞价和您的代码刹车

【讨论】：

这个很有用

【参考方案2】：

这里的主要问题是输入元素上有一个动态类型，所以我预计 Vue 会有点困惑。对于复选框输入，value 与 v-model 组合无效，除非您绑定到数组。

您可以使用 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> 

工作example。

还有其他问题，但这解决了您在问题中提到的错误。一方面，将多个复选框绑定到单个v-model 没有多大意义，除非您绑定到数组。在这种情况下，您必须根据是单选、具有单个值的复选框还是具有多个值的复选框来交换 answer 的类型。看起来会变得很复杂。