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

这里的主要问题是你在输入元素上有一个动态类型，所以我希望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类型。好像它会变得复杂。

Answer 2

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

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

！请勿一起使用值和V模型这是因为v模型会创建两种方式的出价，而您的代码会刹车

VueJS：输入动态值+ v-model

2 个答案: