Vue中条件集v-model

Question

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

具体地说，我有一个Question组件，问题可以只接受一个答案，也可以接受多个答案。我的data中有一个selected_answers数组，我想我可以让复选框将其作为其v-model，而单选按钮可以将其作为selected_answers[0]。这样，我就不需要复制粘贴che输入元素，只需更改它们的类型和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来代替它(取决于字段的类型)。比起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"
/>