Преобразование выпадающего списка в текстовое поле, когда выбран другой вариант

У меня есть выпадающий список, который отображает варианты выбора, сейчас он работает как просто выпадающий список, но когда я выбираю опцию Other, которая является выбором, когда она выбрана, она должна стать textbox.

models.py

class MyModel(models.Model):
    task_name = models.CharField(blank=true, choices=somechoiceClass, default='')


<div class="col-md-4">
            <div class="form-group label-static" :class="{'has-error': errors.task_name && errors.task_name.length > 0}">
              <label class="typo__label control-label">Task Name&nbsp;<span class="req">*</span></label>
              <multiselect
                  v-model="form.task_name"
                  :options="taskNameChoices"
                  :multiple="false"
                  :close-on-select="true"
                  :clear-on-select="true"
                  :preserve-search="true"
                  placeholder="Select"
                  label="text"
                  track-by="id"
                  :hide-selected="false"
                  :show-labels="false">
              </multiselect>
              <span class="help-block" v-show="errors.task_name" v-text="errors.task_name && errors.task_name[0]" v-cloak></span>
            </div>
          </div>

<script>
    taskNameChoices: instanceData.case && instanceData.case.task_names || [],
    this.taskNameChoices = selectedOption.task_names;
</script>

Простое задание для v-if и v-else. Отобразить мультиселект, если значение выбора не "Другое", в противном случае отобразить текстовое поле. Очень простая реализация будет выглядеть следующим образом:

<multiselect 
  v-if="form.task_name !== 'Other'"
  v-model="form.task_name"
  :options="taskNameChoices"
>
<input v-else>

Поле <input> будет нуждаться в собственной v-модели, но как именно ее подключить - это деталь реализации, которая зависит от вас.

Вернуться на верх