html 在Vue中有条件地设置v模型

j91ykkif  于 2022-12-16  发布在  其他
关注(0)|答案(3)|浏览(242)

我有一系列输入,可以是复选框或单选按钮,具体取决于vue组件的data中的值。
具体来说,我有一个Question组件,问题可能只接受一个答案,也可能接受多个答案。我的data中有一个selected_answers数组,我想可以让复选框将其作为v-model,而单选按钮可以将其作为selected_answers[0]。我不需要复制粘贴输入元素,只需要改变它们的类型和v模型。
所以,我的解决方案看起来像这样:

<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

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

mrfwxfqh

mrfwxfqh1#

您不能在v-model中使用任何 * 高级 * 代码(只是一个基本字符串),您可以将question.accepts_multiple_answers ? selected_answers : selected_answers[0]导出为computed,然后将computed插入v-model
如果你需要一个setter,你需要写一个计算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只是一些简单的语法,您也可以将其替换为通常的:value + @input(取决于字段的类型),现在我确实更喜欢使用这两个而不是v-model,特别是考虑到您目前确实存在的限制。

dgenwo3n

dgenwo3n2#

你不能这样做。
我建议您在加载组件时设置一个变量,如下所示:

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>
xmakbtuz

xmakbtuz3#

最后我自己弄明白了。

<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"
/>

相关问题