Vue 选择的选项答案

【问题标题】：Vue selected optionVue 选择的选项
【发布时间】：2018-06-11 16:04:59
【问题描述】：

我正在尝试更改页面加载时的选定选项。当页面加载并且 new 或 used 不为 null 时，我希望选择哪个不为 null 的页面，而不是始终选择状态。我尝试了很多东西，但没有任何效果，也无法在网上找到很多关于如何完成这项工作的信息。

我试过有没有v-bind，没有v-model，还有其他网上看到的方法。

<select id="application-status" class="custom-select" v-model="selected">
  <option :value="null" disabled>Status</option>
  <option :value="'new'" v-bind:selected="item.new != null">New</option>
  <option :value="'used'" v-bind:selected="item.used != null">Used</option>
</select>

无论状态总是显示什么都是正确的。

【问题讨论】：

让this.selected='new' 挂载。

标签： vue.js vuejs2

【解决方案1】：

您需要以某种方式设置selected 的值。一种方法是，正如Sphinx 指出的in their comment，是使用mounted() 生命周期钩子：

const app = new Vue({
  el: "#app",
  mounted() {
    this.selected = "used";
  },
  data() {
    return {
      selected: "",
      item: "new"
    };
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>

<div id="app">
  <select id="application-status" class="custom-select" v-model="selected">
    <option :value="null" disabled>Status</option>
    <option :value="'new'" v-bind:selected="item.new != null">New</option>
    <option :value="'used'" v-bind:selected="item.used != null">Used</option>
  </select>
</div>

【讨论】：