Vue.js 如何在选择器中显示默认值并对选项进行排序？答案

【问题标题】：Vue.js how to display a default value in a selector as well as sort the options?Vue.js 如何在选择器中显示默认值并对选项进行排序？
【发布时间】：2022-01-11 22:04:13
【问题描述】：

我有一个带有 vue.js 的应用程序，但遇到了一个问题，我有一个带有 options 数组中的选项的选择器。
但是当我显示页面时，这个选择器中没有值，基本上我希望它采用第一个基值，但我不知道该怎么做。
在我这样做之前，我还想根据已排序的数组对选项数组进行排序。
提前致谢。

代码： https://codepen.io/pronicio/pen/eYGJjMP

<div id="app">
  <select v-model="selected">
    <option v-for="option in options" v-bind:value="option">
      {{ option }}
    </option>
  </select>
  <span>Selected : {{ selected }}</span>
</div>

new Vue({
  el: '#app',
  data: {
    selected: '',
    options: [ 'A', 'B', 'C'],
    sorted: [ 'B', 'C']
  }
});

【问题讨论】：

I would also like to sort the options array against the sorted array.是什么意思

标签： javascript html vue.js

【解决方案1】：

您在代码盘中使用了一个非常旧版本的 vue。更新版本。您可以将选定的选项添加到 mounted 挂钩中。如果您通过任何 api 获得选项。得到响应后选择选中的。

new Vue({
  el: '#app',
  data: {
    selected: '',
    options: [ 'A', 'B', 'C'],
    sorted: [ 'B', 'C', 'A']
  },
  mounted(){
    this.selected =  this.options[0]
    
  }
});

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
  font-family: 'Open Sans', sans-serif;
  background: rgba(0,0,0,.5);
  margin: 0;
}

#app {
  width: 500px;
  margin: 0 auto;
  padding: 10px 20px;
  background: rgba(255,255,255,.9);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select v-model="selected">
    <option v-for="option in options" v-bind:value="option">
      {{ option }}
    </option>
  </select>
  <span>Selected : {{ selected }}</span>
</div>

【讨论】：