vue에서 el-select로 선택된 값을 얻는 방법

Vue에서 ElementUI의 el-select 컴포넌트를 사용할 때 사용자가 선택한 값을 가져와야 합니다. 선택한 값을 얻는 방법에는 여러 가지가 있습니다. 여기서는 몇 가지 일반적인 방법을 소개합니다.

방법 1: v-model

가장 쉬운 방법은 v-model 명령을 사용하는 것입니다. v-model은 el-select 구성 요소에 바인딩되어 선택한 값을 자동으로 얻을 수 있습니다.

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

이런 방식으로 사용자가 옵션을 변경하면 selectedValue의 값이 선택한 옵션의 값으로 자동 업데이트됩니다.

방법 2: @change 이벤트

선택한 값을 얻는 또 다른 방법은 @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);
  }
}

사용자가 옵션을 변경하면 선택한 값이 handlerChange 메소드에 매개변수로 전달되어 인쇄됩니다.

방법 3: ref

또한 ref를 사용하여 el-select 구성 요소 인스턴스를 가져온 다음 인스턴스의 메서드를 통해 선택한 값을 가져올 수도 있습니다.

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

handleClick 메소드에서는 this.$refs를 통해 인스턴스를 참조한 후 getSelectedValue() 메소드를 사용하여 선택된 값을 가져옵니다.

방법 4: v-bind 바인딩 값

마지막 방법은 v-bind 명령을 사용하여 선택한 값을 상위 구성 요소의 변수에 바인딩하여 선택한 값을 얻는 것입니다.

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

이런 방식으로 선택된 값을 selectedValue 변수에 바인딩한 다음, handlerChange 메서드에서 selectedValue의 값을 업데이트하고 이를 인쇄합니다.

요약

위의 방법은 모두 선택한 el-select 값을 얻을 수 있습니다. 어떤 방법을 사용할지는 특정 요구 사항에 따라 다릅니다. 어떤 방법을 사용하더라도 el-select로 선택된 값을 Vue에서 쉽게 얻어 다양한 인터랙티브 기능을 구현할 수 있습니다.

위 내용은 vue에서 el-select로 선택된 값을 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!