vue + element + select 獲取下拉框的 label 和 value 值（ 例如 綁定的是 id ， 但后台要求即傳 id ，又要傳 id 對應的 name ）

vue + element + select 獲取下拉框的 label 和 value 值（ 例如 綁定的是 id ， 但后台要求即傳 id ，又要傳 id 對應的 name ）
<template>
  <div>
    <el-form :inline="true" :model="form" ref="form" :rules="formRule">
      <el-form-item label="標題" prop="titleId">
        <el-select v-model="form.titleId" filterable placeholder="請選擇標題" @change="changeTitle">
          <el-option v-for="item in titleList" :key="item.id" :label="item.titleName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { formRule} from "@/utils/valid";
export default {
  data() {
    return {
      form: {},
      formRule,  // 表單校驗
      titleList: [],  // 標題列表
      title: {},  // 選中的標題
    }
  },
  methods: {
    // 調接口獲取標題列表
    getTitle() {
      titleList().then(res => {
        if (res.code == 0) {
          this.titleList= res.data;
        } else {
          this.$message.error(res.message)
        }
      })
    },  
    changeTitle(id) {
      this.title= this.titleList.find(item => item.id == id)   // this.title 是通過選中的id去從標題列表里面查找得到的是選中的那一條數據的一個對象，包含選中的數據的 name、id 等 ， 后面可以通過 this.title.name 來獲取標題名稱
    },