Установить максимальный номер для флажков, которые можно выбрать для формы в Element-ui? - PullRequest
0 голосов
/ 16 октября 2019

Я пытаюсь установить флажки из массива с v-for. В настоящее время я сохраняю число, которое пользователь вводит для количества флажков, которые можно выбрать, как я могу правильно объединить установку флажков с v-if и установка "min: '1' :max:'form.num'.

Сейчас я показываю все флажки в массиве, но минимальный максимум не работает? Если я попробую другой способ, флажки не будут отображаться вообще.

То, что показывает флажки, но min max не работает

<el-form-item :min="1" :max="form.num" v-for="(option, index) in questionOptions" 
        :key="index">
    <el-checkbox :label="option.option"></el-checkbox>
</el-form-item>

Это похоже на документы, но флажки невообще не появляется, и я получаю эту ошибку несколько раз

Error in render: "TypeError: Cannot read property 'length' of undefined" found in
<ElCheckbox>

TypeError: Cannot read property 'length' of undefined at VueComponent.isLimitDisabled
<el-form-item>
    <el-checkbox-group :min="1" :max="form.num">
        <el-checkbox v-for="(option, index) in questionOptions" :key="index">
            {{option.option}}
        </el-checkbox>
    </el-checkbox-group>
</el-form-item>

Где моя ошибка? или как мне правильно это сделать?

1 Ответ

0 голосов
/ 16 октября 2019

Вот как вы должны это сделать

<template>
   <el-checkbox-group :min="1" :max="max" v-model='optionsSelected'>
    <el-checkbox v-for="(option, index) in options" :key="index">
        {{option}}
    </el-checkbox>
  </el-checkbox-group>
</template>
<script>
     data() {
  return {
    optionsSelected: ['lalala','lololo'],
    options: [],
    max:3,
  },
 async created(){

      const options = await axios.get('your endpoint');
      this.options = options.data;

  }
}
</script>
...