element下拉框change

Question

element下拉框change想获取name，应该怎么写element下拉框change想获取name，应该怎么写

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

从你给出的代码和描述来看，你想要在 Element UI 的下拉框（<el-select>）的 change 事件发生时获取选中的选项的 name。你可以通过 v-model 绑定的变量来获取选中的 name。在你的代码中，你已经用 v-model 将选中的值绑定到了 items.country_id。你可以通过监听这个变量的变化来获取选中的 name。

假设你的下拉框选项数据存储在 allCountry 数组中，每个选项对象都有 country_id 和 name 属性，你可以在 allChange 方法中通过 items.country_id 来查找对应的 name。这是一个可能的实现方式：

<template>
  <!-- 你的代码 -->
  <el-select v-model="items.country_id" filterable clearable :placeholder="$t('company.enterprise.placeholder.nationality')" v-if="allCountry.length" @change="allChange">
    <el-option v-for="item in allCountry" :label="item.name" :value="item.country_id" :key='item.country_id'></el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      items: {
        country_id: null, // 这里存储选中的 country_id
        // 其他数据...
      },
      allCountry: [ /* 你的选项数据 */ ], // 这里存储所有可选的国家/地区数据
    };
  },
  methods: {
    allChange(value) {
      const selectedItem = this.allCountry.find(item => item.country_id === value);
      if (selectedItem) {
        console.log('选中的名称是：', selectedItem.name); // 输出选中的名称
        // 这里你可以将选中的名称用于其他操作
      }
    },
  },
};
</script>

在上述代码中，当用户选择一个新的选项时，items.country_id 的值会更新为所选选项的 country_id，然后你可以在 allChange 方法中使用这个 country_id 来查找对应的 name。