NuxtJs预订应用表单联动实现按出发城市过滤到达城市方案咨询

步骤1：改造通用城市下拉组件 #

给组件新增排除指定国家的参数，将原有的静态过滤逻辑改为响应式计算属性，适配动态排除需求。
改造后的完整组件代码如下：

<template>
  <div class="dropdownList">
    <label class="formLabel">{{ label }}</label>

    <input
      ref="dropdowninput"
      v-if="Object.keys(selectedItem).length === 0"
      v-model.trim="inputValue"
      class="dropdown-input"
      type="text"
      :placeholder="placeholder"
    />

    <div v-else @click="resetItem" class="dropdown-selected">
      {{ selectedItem.name }}
    </div>

    <div v-show="inputValue && apiLoaded && filteredList.length" class="dropdown-list">
      <div
        @click="selectItem(item)"
        v-for="item in filteredList"
        :key="item.name"
        class="dropdown-item"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      selectedItem: {},
      inputValue: "",
      itemList: [],
      apiLoaded: false,
      apiUrl: "***"
    };
  },
  props: {
    placeholder: String,
    label: String,
    // 新增参数：需要排除的国家编码
    excludeCountryCode: {
      type: String,
      default: ''
    }
  },

  computed: {
    // 响应式过滤列表：先排除指定国家，再匹配用户输入的搜索关键词
    filteredList() {
      let result = [...this.itemList]
      // 过滤掉需要排除的国家
      if (this.excludeCountryCode) {
        result = result.filter(item => item.countryCode !== this.excludeCountryCode)
      }
      // 匹配搜索输入
      if (this.inputValue.trim()) {
        const inputStr = this.inputValue.trim().toLowerCase()
        result = result.filter(item => item.name.toLowerCase().includes(inputStr))
      }
      return result
    }
  },

  mounted() {
    this.getList();
  },

  methods: {
    getList() {
      axios.get(this.apiUrl).then(response => {
        this.itemList = response.data;
        this.apiLoaded = true;
      });
    },
    selectItem(theItem) {
      this.selectedItem = theItem;
      this.inputValue = "";
      this.$emit("on-item-selected", theItem);
    },
    resetItem() {
      this.selectedItem = {};
      this.$nextTick(() => this.$refs.dropdowninput.focus());
      this.$emit("on-item-reset");
    }
  }
};
</script>

步骤2：父组件关联出发、到达城市的逻辑 #

在父组件中存储出发城市对应的国家编码，传递给到达城市下拉组件作为排除条件即可：

<template>
  <div class="trip-form">
    <!-- 出发城市选择器 -->
    <CityDropdown
      label="出发城市"
      placeholder="请输入/选择出发城市"
      @on-item-selected="onDepartSelected"
      @on-item-reset="onDepartReset"
    />
    <!-- 到达城市选择器 -->
    <CityDropdown
      label="到达城市"
      placeholder="请输入/选择到达城市"
      :exclude-country-code="departCountryCode"
    />
  </div>
</template>
<script>
import CityDropdown from './CityDropdown.vue'
export default {
  components: { CityDropdown },
  data() {
    return {
      // 存储出发城市对应的国家编码
      departCountryCode: ''
    }
  },
  methods: {
    onDepartSelected(selectedCity) {
      // 选中出发城市后，更新需要排除的国家编码
      this.departCountryCode = selectedCity.countryCode
    },
    onDepartReset() {
      // 出发城市重置时，清空排除条件
      this.departCountryCode = ''
    }
  }
}
</script>

适配说明 #

你数据库存储的城市数据自带countryCode字段，刚好匹配该逻辑：比如出发地选了匈牙利（国家编码HU）的城市，到达城市下拉会自动过滤所有countryCode = HU的城市，满足国际行程的要求。

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