在vuejs中使用`v-select`时如何获取`id`值作为选项值和`cname`作为选项标签？答案

【问题标题】：How to get `id` value as option value and `cname` as option label when using `v-select` in vuejs?在vuejs中使用`v-select`时如何获取`id`值作为选项值和`cname`作为选项标签？
【发布时间】：2019-06-26 01:17:57
【问题描述】：

当使用v-select 时，我正在尝试将id 值作为VueJs 中的选项值。现在，我很难获得将被选中的id 值。有人可以帮我解决这个问题吗？

我的index.html 文件是 -

<!DOCTYPE html>
<html>
<head>
<title>VueJs | Select2</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
  <div id="pageContent">
    <form method="POST" @submit.prevent="addSection()">
      <div class="form-group">
        <label for="className">Select Class</label>
        <v-select name="className" v-model="className" :options="academicClasses.map(({cname}) => cname)"></v-select>
      </div>
       <div class="form-group">
         <button type="submit" class="btn btn-success save-btn"><i class="fa fa-check"></i> Save</button>
       </div>
    </form>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue-select@latest"></script>

</body>
</html>

而我的 vujs 脚本是 -

Vue.component('v-select', VueSelect.VueSelect);

var app = new Vue({
  el: '#pageContent',
  data: {
    className: '',
    academicClasses: [],
    academicClasses: [
            {
            id: 1,
          cname: 'One'
        },
            {
            id: 2,
          cname: 'Two'
        },
            {
            id: 3,
          cname: 'Three'
        },
            {
            id: 4,
          cname: 'Four'
        }
    ],
  },

  methods: {
    addSection(){
        alert(this.className);
    }
  }
})

请您访问JSFiddle 了解我要解释的内容！请访问-JsFiddle

【问题讨论】：

标签： javascript vue.js vuejs2 jquery-select2 v-select

【解决方案1】：

在此处更改：

<v-select name="className" v-model="className" :options="academicClasses.map(academicClass => ({label: academicClass.cname, value: academicClass.id}))"></v-select>

这里：

alert(this.className.label + ' - ' + this.className.value);

文档：Dropdown Options

【讨论】：

【解决方案2】：

您希望在以下结构中为 options 属性传递一个对象数组：

[{
  label: item.cname,
  value: item.id
}]

Vue.component('v-select', VueSelect.VueSelect);

var app = new Vue({
  el: '#pageContent',
  
  data() {
    return {
      className: '',
      
      academicClasses: [
        { id: 1, cname: 'One'}, 
        { id: 2, cname: 'Two' }, 
        { id: 3, cname: 'Three' }, 
        { id: 4, cname: 'Four' }
      ],
    }
  },
  
  methods: {
    addSection() {
      alert(this.className);
    }
  },
  
  computed: {
    opts() {
      return this.academicClasses.map(item => ({
        label: item.cname,
        value: item.id
      }));
    }
  },

  watch: {
    className(val) {
      console.log(val);
    }
  }
})

Vue.config.devtools = false;
Vue.config.productionTip = false;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-select@latest"></script>

<div id="pageContent">
  <form method="POST" @submit.prevent="addSection()">
    <div class="form-group">
      <label for="className">Select Class</label>
      <v-select name="className" v-model="className" :options="opts"></v-select>
    </div>
    <div class="form-group">
      <button type="submit" class="btn btn-success save-btn"><i class="fa fa-check"></i> Save</button>
    </div>
  </form>
</div>

【讨论】：