Vue.js 动态表单：实现下拉框选择“其他”时切换为文本输入框

export default {
  data() {
    return {
      form: {
        task_name: '', // 初始值可以为空字符串或一个默认选项
      },
      // 假设 taskNameChoices 包含预设选项，其中一个选项的 ID 或文本为 'Other'
      taskNameChoices: [
        { id: 'development', text: '开发' },
        { id: 'testing', text: '测试' },
        { id: 'other', text: '其他' } // 关键的“其他”选项
      ],
    };
  },
  // ... 其他组件选项
};

<template>
  <div class="col-md-4">
    <div class="form-group label-static">
      <label class="typo__label control-label">任务名称 <span class="req">*</span></label>

      <!-- 当 form.task_name 不等于 'other' 时显示多选下拉框 -->
      <multiselect
        v-if="form.task_name !== 'other'"
        v-model="form.task_name"
        :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>

      <!-- 当 form.task_name 等于 'other' 时显示文本输入框 -->
      <input
        v-else
        v-model="form.task_name"
        type="text"
        placeholder="请输入自定义任务名称"
        class="form-control"
      >

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

<template>
  <div class="col-md-4">
    <div class="form-group label-static">
      <label class="typo__label control-label">任务名称 <span class="req">*</span></label>

      <!-- 当 form.task_name 不等于 'other' 时显示多选下拉框 -->
      <multiselect
        v-if="form.task_name !== 'other'"
        v-model="form.task_name"
        :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>

      <!-- 当 form.task_name 等于 'other' 时显示文本输入框 -->
      <input
        v-else
        v-model="form.task_name"
        type="text"
        placeholder="请输入自定义任务名称"
        class="form-control"
      >

      <!-- 错误信息显示（如果您的表单有错误处理机制） -->
      <!-- <span class="help-block" v-show="errors.task_name" v-text="errors.task_name && errors.task_name[0]" v-cloak></span> -->
    </div>
  </div>
</template>

<script>
// 假设您已经正确引入并注册了 'vue-multiselect' 组件
import Multiselect from 'vue-multiselect';
import 'vue-multiselect/dist/vue-multiselect.min.css'; // 引入样式

export default {
  components: {
    Multiselect,
  },
  data() {
    return {
      form: {
        task_name: '', // 初始值
      },
      taskNameChoices: [
        { id: 'development', text: '开发' },
        { id: 'testing', text: '测试' },
        { id: 'design', text: '设计' },
        { id: 'other', text: '其他' } // 包含 'other' 选项
      ],
      // errors: {} // 如果有错误处理，可以在这里定义
    };
  },
  // 可以添加 methods 或 watch 来进一步处理逻辑
  methods: {
    // 例如，可以在选择 'other' 后，清除之前的选择，确保输入框是空的
    // 但由于 v-model 共享，用户输入会直接覆盖 'other'，所以通常不需要额外处理
  },
  watch: {
    'form.task_name'(newValue, oldValue) {
      // 可以在这里观察 task_name 的变化，进行调试或触发其他逻辑
      // console.log('task_name changed from', oldValue, 'to', newValue);
    }
  }
};
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<style>
/* 自定义样式 */
.form-control {
  /* 确保输入框样式与您的项目一致 */
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
</style>