面试题：Vue 复杂表单结合计算属性实现动态联动字段

Question

假设有一个 Vue 表单，包含两个下拉框，第一个下拉框选择'水果'（选项为'苹果'、'香蕉'、'橙子'），第二个下拉框根据第一个下拉框的选择动态显示对应水果的不同品种（例如选'苹果'，第二个下拉框选项为'红富士'、'蛇果'；选'香蕉'，第二个下拉框选项为'小米蕉'、'帝王蕉'等）。同时，有一个文本框显示根据两个下拉框选择组合后的详细信息（例如'你选择了红富士苹果'）。请使用 Vue 计算属性和表单绑定实现此功能，阐述思路并写出核心代码。

Answer 1

思路

1. 数据绑定：使用 Vue 的 v-model 指令分别将两个下拉框和文本框与数据进行绑定。
2. 动态选项：在 Vue 的数据对象中，定义一个对象，用于存储不同水果对应的品种。通过监听第一个下拉框的变化，动态更新第二个下拉框的选项。
3. 计算属性：使用计算属性根据两个下拉框的选择生成详细信息，并显示在文本框中。

核心代码

<template>
  <div>
    <select v-model="selectedFruit">
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="橙子">橙子</option>
    </select>

    <select v-model="selectedVariety">
      <option v-for="variety in fruitVarieties[selectedFruit]" :key="variety">{{ variety }}</option>
    </select>

    <input type="text" v-model="displayInfo" readonly>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFruit: '',
      selectedVariety: '',
      fruitVarieties: {
        '苹果': ['红富士', '蛇果'],
        '香蕉': ['小米蕉', '帝王蕉'],
        '橙子': ['脐橙', '血橙']
      }
    };
  },
  computed: {
    displayInfo() {
      return `你选择了${this.selectedVariety}${this.selectedFruit}`;
    }
  }
};
</script>