So erhalten Sie den von el-select in vue ausgewählten Wert

Wenn wir die El-Select-Komponente von ElementUI in Vue verwenden, müssen wir den vom Benutzer ausgewählten Wert abrufen. Es gibt viele Möglichkeiten, den ausgewählten Wert zu erhalten. Hier stellen wir einige gängige Methoden vor.

Methode 1: V-Modell

Der einfachste Weg ist die Verwendung des V-Modell-Befehls. Das V-Modell ist an die El-Select-Komponente gebunden und kann den ausgewählten Wert automatisch abrufen.

<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: ''
  }
}

Auf diese Weise wird der Wert von selectedValue automatisch auf den Wert der ausgewählten Option aktualisiert, wenn der Benutzer die Option ändert.

Methode 2: @change-Ereignis

Eine andere Möglichkeit, den ausgewählten Wert zu erhalten, besteht darin, das @change-Ereignis abzuhören.

<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);
  }
}

Wenn der Benutzer die Option ändert, wird der ausgewählte Wert als Parameter an die handleChange-Methode übergeben und ausgedruckt.

Methode 3: ref

Wir können auch ref verwenden, um die el-select-Komponenteninstanz abzurufen und dann den ausgewählten Wert über die Methode in der Instanz abzurufen.

<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);
  }
}

In der handleClick-Methode verweisen wir über this.$refs auf die Instanz und verwenden dann die Methode getSelectedValue(), um den ausgewählten Wert abzurufen.

Methode 4: v-bind-Bindungswert

Die letzte Methode besteht darin, den ausgewählten Wert mit der v-bind-Anweisung an eine Variable der übergeordneten Komponente zu binden, um den ausgewählten Wert zu erhalten.

<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);
  }
}

Auf diese Weise binden wir den ausgewählten Wert an die Variable selectedValue, aktualisieren dann den Wert von selectedValue in der handleChange-Methode und drucken ihn aus.

Zusammenfassung

Die oben genannten Methoden können alle den ausgewählten el-select-Wert erhalten. Welche Methode Sie verwenden, hängt von Ihren spezifischen Anforderungen ab. Unabhängig von der verwendeten Methode kann der von el-select ausgewählte Wert problemlos in Vue abgerufen werden, um verschiedene interaktive Funktionen zu implementieren.

Das obige ist der detaillierte Inhalt vonSo erhalten Sie den von el-select in vue ausgewählten Wert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!