选择其他选项时将下拉列表转换为文本框答案

【问题标题】：convert dropdown to text box when other option is selected选择其他选项时将下拉列表转换为文本框
【发布时间】：2022-10-17 09:30:38
【问题描述】：

我有一个下拉菜单，它现在显示选项，它就像下拉菜单一样工作，但是当我选择其他选项时，它应该成为文本框。

模型.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>

【问题讨论】：

标签： javascript html django vue.js frontend

【解决方案1】：

v-if 和 v-else 的简单工作。在选择值不是“其他”时显示多选择性，否则显示文本框。一个非常简单的实现如下所示：

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

<input> 字段需要它自己的 v-model，但如何准确连接它是由您决定的实现细节。

【讨论】：