Vue实现文本输入框根据下拉列表指定选中项条件显示

解决步骤 #

1. 正确查看解析后的文档类型数据 #

你之前console.log不生效大概率是放置位置不对，要放在接口请求解析完数据的代码后面：

.then(({data}) => {
  this.participants = data.participants;
  this.installmentData = data.installments;
  this.installmentData.paymentDateStart = moment(data.installments.paymentDateStart).format('YYYY-MM-DD');
  this.installmentData.paymentDateEnd = moment(data.installments.paymentDateEnd).format('YYYY-MM-DD');
  this.documentTypes = JSON.parse(data.documentTypes);
  this.formattedDocumentTypes = JSON.parse(data.formattedDocumentTypes);
  // 加在这里就能打印出解析后的数据
  console.log('解析后的文档类型：', this.documentTypes);
  console.log('格式化后的文档类型：', this.formattedDocumentTypes);
  this.loading = false;
})

更直观的方法是安装Vue Devtools浏览器插件，打开开发者工具切换到Vue面板，直接找到当前AttachmentEditForm组件，就能实时看到所有响应式变量的取值。

2. 补充响应式变量声明 #

你当前的data里没有声明documentType、documentTypes等变量，会导致数据不是响应式，v-model绑定和条件判断都不会生效，修改data定义：

data() {
  return {
    waiting: {},
    documentType: '', // 绑定下拉框选中值
    documentTypes: [], // 存储接口返回的原始文档类型
    formattedDocumentTypes: [],
    loading: true
  }
}

3. 实现选中指定类型后显示输入框 #

打印出documentTypes数据后，找到名称为Write Individual的选项对应的取值，假设你要判断的是选中项的name，就可以在下拉框后面加输入框的条件渲染：

</b-field>
<!-- 新增文本输入框，仅选中Write Individual时显示 -->
<b-field v-if="selectedDocumentTypeName === 'Write Individual'" :label="t('input_content')">
  <b-input v-model="inputContent" />
</b-field>

如果你的下拉框v-model绑定的是type.id，就需要加一个计算属性拿到选中项的名称：

computed: {
  selectedDocumentTypeName() {
    // 遍历所有分组找到匹配id的文档类型名称
    for (const group of this.allDocumentTypeGroups) {
      const target = group.documentTypes.find(item => item.id === this.documentType)
      if (target) return target.name
    }
    return ''
  }
}

如果是直接绑定的type.name就更简单，直接写v-if="documentType === 'Write Individual'"即可。

内容的提问来源于stack exchange，提问作者user16741832