Bagaimana untuk mendapatkan nilai yang dipilih oleh el-select dalam vue

Apabila menggunakan komponen el-select ElementUI dalam Vue, kita perlu mendapatkan nilai yang dipilih oleh pengguna. Terdapat banyak cara untuk mendapatkan nilai yang dipilih Di sini kami memperkenalkan beberapa kaedah biasa.

Kaedah 1: v-model

Kaedah paling mudah ialah menggunakan arahan v-model. v-model terikat pada komponen el-select dan secara automatik boleh mendapatkan nilai yang dipilih.

<el-select v-model="selectedValue">
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

// 在 Vue 实例中定义 selectedValue
data() {
  return {
    selectedValue: ''
  }
}

Dengan cara ini, apabila pengguna menukar pilihan, nilai selectedValue akan dikemas kini secara automatik kepada nilai pilihan yang dipilih.

Kaedah 2: @change event

Cara lain untuk mendapatkan nilai yang dipilih ialah mendengar acara @change.

<el-select @change="handleChange">
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

// 在 Vue 实例中定义 handleChange 方法
methods: {
  handleChange(val) {
    console.log('选中的值是', val);
  }
}

Apabila pengguna menukar pilihan, nilai yang dipilih akan dihantar sebagai parameter kepada kaedah handleChange dan dicetak.

Kaedah 3: ref

Kita juga boleh menggunakan ref untuk mendapatkan contoh komponen el-select, dan kemudian mendapatkan nilai yang dipilih melalui kaedah dalam contoh itu.

<template>
  <div>
    <el-select ref="mySelect">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <el-button type="primary" @click="handleClick">获取选中值</el-button>
  </div>
</template>

// 在 Vue 实例中定义 handleClick 方法
methods: {
  handleClick() {
    const selectValue = this.$refs.mySelect.getSelectedValue();
    console.log('选中的值是', selectValue);
  }
}

Dalam kaedah handleClick, kami merujuk kepada contoh melalui ini.$refs, dan kemudian gunakan kaedah getSelectedValue() untuk mendapatkan nilai yang dipilih.

Kaedah 4: nilai mengikat v-bind

Kaedah terakhir ialah menggunakan arahan v-bind untuk mengikat nilai yang dipilih kepada pembolehubah komponen induk untuk mendapatkan nilai yang dipilih.

<el-select v-bind:value="selectedValue" @change="handleChange">
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>

// 在 Vue 实例中定义 selectedValue 和 handleChange 方法
data() {
  return {
    selectedValue: ''
  }
},
methods: {
  handleChange(val) {
    this.selectedValue = val;
    console.log('选中的值是', this.selectedValue);
  }
}

Dengan cara ini, kami mengikat nilai yang dipilih pada pembolehubah nilai yang dipilih, dan kemudian mengemas kini nilai nilai yang dipilih dalam kaedah Ubah handle dan mencetaknya.

Ringkasan

Kaedah di atas semuanya boleh mendapatkan nilai el-select yang dipilih Kaedah yang hendak digunakan bergantung pada keperluan khusus anda. Tidak kira kaedah yang digunakan, nilai yang dipilih oleh el-select boleh diperolehi dengan mudah dalam Vue untuk melaksanakan pelbagai fungsi interaktif.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan nilai yang dipilih oleh el-select dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!