在vuejs中使用`v-select`時，如何獲取`id`值作為選項值和`cname`作為選項標簽？

Question

我在嘗試使用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

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

文檔：下拉選項

Answer 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>

在vuejs中使用`v-select`時，如何獲取`id`值作為選項值和`cname`作為選項標簽？

問題描述

2 個解決方案

解決方案1
1 2019-02-01 13:10:58

解決方案2
1 2019-02-01 13:14:46

在vuejs中使用`v-select`時，如何獲取`id`值作為選項值和`cname`作為選項標簽？

問題描述

2 個解決方案

解決方案1 1 2019-02-01 13:10:58

解決方案2 1 2019-02-01 13:14:46

解決方案1
1 2019-02-01 13:10:58

解決方案2
1 2019-02-01 13:14:46