Vue.js 动态表单：实现下拉框与文本框的智能切换

export default {
  data() {
    return {
      form: {
        selectedTaskOption: null, // 存储下拉框选中的对象
        otherTaskName: ''         // 存储“Other”选项对应的自定义文本
      },
      taskNameChoices: [
        { id: 1, text: '任务A' },
        { id: 2, text: '任务B' },
        { id: 'other', text: 'Other' } // 定义“Other”选项，id 可以是任意唯一标识
      ],
      errors: {} // 用于存储表单验证错误信息
    };
  },
  // ... 其他选项
};

<template>
  <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">任务名称 <span class="req">*</span></label>

      <!-- 当未选中“Other”选项时显示下拉选择框 -->
      <multiselect
        v-if="!isOtherSelected"
        v-model="form.selectedTaskOption"
        :options="taskNameChoices"
        :multiple="false"
        :close-on-select="true"
        :clear-on-select="true"
        :preserve-search="true"
        placeholder="选择任务"
        label="text"
        track-by="id"
        :hide-selected="false"
        :show-labels="false"
      >
      </multiselect>

      <!-- 当选中“Other”选项时显示文本输入框 -->
      <input
        v-else
        type="text"
        class="form-control"
        v-model="form.otherTaskName"
        placeholder="请输入其他任务名称"
      />

      <!-- 错误信息显示 -->
      <span class="help-block" v-show="errors.task_name" v-text="errors.task_name && errors.task_name[0]" v-cloak></span>
    </div>
  </div>
</template>

export default {
  // ...
  computed: {
    isOtherSelected() {
      // 判断当前选中的是否是“Other”选项
      return this.form.selectedTaskOption && this.form.selectedTaskOption.text === 'Other';
    }
  },
  // ...
};

export default {
  // ...
  watch: {
    'form.selectedTaskOption': {
      handler(newValue, oldValue) {
        // 当从非“Other”切换到“Other”时，清除 otherTaskName，准备用户输入新内容
        if (newValue && newValue.text === 'Other' && (!oldValue || oldValue.text !== 'Other')) {
          this.form.otherTaskName = '';
        }
        // 当从“Other”切换到非“Other”时，也可以选择清除 otherTaskName，避免数据残留
        if (oldValue && oldValue.text === 'Other' && (!newValue || newValue.text !== 'Other')) {
          this.form.otherTaskName = '';
        }
      },
      deep: true // 深度监听对象的变化
    }
  },
  // ...
};

export default {
  // ...
  methods: {
    submitForm() {
      let finalTaskName = '';
      if (this.isOtherSelected) {
        finalTaskName = this.form.otherTaskName; // 如果是“Other”，提交自定义文本
      } else if (this.form.selectedTaskOption) {
        finalTaskName = this.form.selectedTaskOption.text; // 否则，提交选中的选项文本
      }
      console.log('最终提交的任务名称:', finalTaskName);
      // 在这里进行API调用，将 finalTaskName 发送到后端
      // 例如: axios.post('/api/tasks/', { task_name: finalTaskName });
    }
  },
  // ...
};

export default {
  // ...
  created() {
    // 模拟从后端获取的初始数据
    // 假设后端数据可能是 { task_name: '任务A' } 或 { task_name: 'Other', other_value: '我的自定义任务' }
    const initialData = { task_name: 'Other', other_value: '我的自定义任务' }; // 示例数据

    if (initialData.task_name) {
      const foundOption = this.taskNameChoices.find(
        option => option.text === initialData.task_name
      );

      if (foundOption) {
        this.form.selectedTaskOption = foundOption;
        // 如果初始值是“Other”，并且有对应的自定义值，则填充 otherTaskName
        if (foundOption.text === 'Other' && initialData.other_value) {
          this.form.otherTaskName = initialData.other_value;
        }
      } else {
        // 如果后端返回的 task_name 不在预设选项中，可以将其视为一个“Other”情况
        // 此时，需要将 selectedTaskOption 设置为“Other”选项，并将实际值赋给 otherTaskName
        this.form.selectedTaskOption = this.taskNameChoices.find(option => option.text === 'Other');
        this.form.otherTaskName = initialData.task_name;
      }
    }
  }
};

# models.py
from django.db import models

class MyModel(models.Model):
    # task_name 字段可以存储