VueJS:输入动态值+ v-model

Question

设置输入无线电和V模型的值时,我遇到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"作为值,当用户单击单选按钮时,模型"answer"将填充该值.

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

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

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

顺便说一句,此页面上的VueJS文档正好说明了我要做的事情:https://vuejs.org/v2/guide/forms.html

非常感谢任何帮助.

Answer 1

这里的主要问题是你在 input 元素上有一个动态类型，所以我希望 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> 

工作示例。

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