在 Vue 中有条件地设置 v-model

Question

我有一系列输入，可以是复选框或单选按钮，具体取决于我的 vue 组件的 data 中的值。

特别是，我有一个Question 组件，问题可能只接受一个答案或多个答案。我的data 中有一个selected_answers 数组，我想我可以让复选框将其定位为v-model，而单选按钮可以定位selected_answers[0]。这样，我不必复制粘贴输入元素，只需更改它们的类型和 v-model。

所以，我的解决方案如下所示：

<input
    :type="question.accepts_multiple answers ? 'checkbox' : 'radio'"
    :id="'ans-' + answer.id"
    :value="answer.id"
    v-model="question.accepts_multiple_answers ? selected_answers : selected_answers[0]"
/>

但是，eslint 抱怨我的代码：

'v-model' directives require the attribute value which is valid as LHS

有什么方法可以完成我想做的事情？

Answer 1

您不能在v-model 中使用任何高级 代码（只是一个基本字符串），您可以将question.accepts_multiple_answers ? selected_answers : selected_answers[0] 导出到computed 并将computed 插入到v-model .

如果你需要一个setter，你需要写一个computed setter，看起来像这样

computed: {
  fullName: {
    // getter
    get() {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set(newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

---

同时，由于v-model 只是一些sugar syntax，您也可以将其替换为通常的:value + @input（取决于字段的类型）。我现在更喜欢使用那些 2 而不是 v-model，尤其是对于你现在确实存在的那种限制。

Answer 2

你真的不能那样做。

我建议您在像这样加载组件时设置一个变量：

data()
{
    return {
        model_string: '',
    }
}

然后你根据你自己的条件给你的变量一些值

created() {
   if (your.first.condition) {
    this.model_string = your.value;
   } else if (your.other.condition) {
    this.model_string = your.value;
   }
}

在此之后，您可以在视图中随意使用它

<input v-model="model_string" ..... // your attributes>

Answer 3

最终自己解决了。

<input
    :type="question.accepts_multiple_answers ? 'checkbox' : 'radio'"
    :id="'ans-' + answer.id"
    :value="question.accepts_multiple_answers ? answer.id : [answer.id]"
    v-model="selected_answers"
/>