Vuejs选择框在加载

时间:2018-06-07 14:25:43

标签: vue.js vuejs2

嘿大家所以我有这个vueapp循环显示一系列显示它工作得很好除非应用程序加载时我想要放置第一个显示(数组索引为0或最旧的id)负载下拉怎么办呢?继承人的代码。

    <div v-show="loggedin==1" class="searchBy">
    <h2>Selected Display</h2>
        <select v-model="selectedDisplay" v-on:change="getVideoAndName()">
      <option v-for="display in displays" :value="display">{{display.name}}</option>
      </select>
    </div>

表示数组项中的值。请记住它的数组,因此它也有一个索引。

纵横比: “7:3” FILEFORMAT: “MP4” 高度: “48” ID: “31” 名称: “112x48” 形状: “432x184” shapetext:“形状4” 用户名: “92” 宽度: “112”

1 个答案:

答案 0 :(得分:2)

您可以将selectedDisplay值设置为显示[0]或者您想要的,因此当加载select标签时,它的默认值设置为,如下所示:

var app = new Vue({
  el: '#app',
  data: {
    selectedDisplay: null,
    displays: [
      'Vue',
      'React',
      'Angular',
      'Aurelia',
      'Knockout'
    ]
  },
  beforeMount: function () {
    this.selectedDisplay = this.displays[0]
  }
});
<div id="app">

  <select v-model="selectedDisplay">
  
    <option v-for="display in displays" :value="display">{{ display }}</option>
  
  </select>

  <h1>{{ selectedDisplay }}</h1>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>