如何在 select 中添加条件？ (Vue.JS 2)答案

【问题标题】：How can I add condition in select ? (Vue.JS 2)如何在 select 中添加条件？ (Vue.JS 2)
【发布时间】：2017-08-17 10:40:53
【问题描述】：

我有这样的 vue 组件：

<script>
    export default{
        template: '\
            <select class="form-control" v-on:change="search">\
                <option v-for="option in options" v-bind:value="option.id ? option.id+\'|\'+option.name : \'\'">{{ option.name }}</option>\
            </select>',
        mounted() {
            this.fetchList();
        },
        ...
    };
</script>

它有效。没有错误

但是，我想在选择中再次添加条件

如果满足条件则selected

我添加这样的条件：

template: '\
            <select class="form-control" v-on:change="search">\
                <option v-for="option in options" v-bind:value="option.id ? option.id+\'|\'+option.name : \'\'" option.id == 1 ? \'selected\' : \'\'>{{ option.name }}</option>\
            </select>',

存在这样的错误：

[Vue 警告]：实例上未定义属性或方法“选项” 但在渲染期间引用。确保声明反应数据数据选项中的属性。

我该如何解决？

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

我会改为基于 v-model：

<select @change="search" v-model="select">
  <option v-for="option in options" :value="option.id">
    {{ option.name }}
  </option>
</select>

<script>
export default {
  props: {
    value: [Number, String]
  },
  data() {
    return { select: this.value };
  },
  watch: {
    value: function (val) {
      this.select = val;
    }
  },
  methods: {
    // ...
  }
};
</script>

【讨论】：

【解决方案2】：

这应该可行。像这样更改您的代码。

<option v-for="option in options" v-bind:value="option.id ? option.id+\'|\'+option.name : \'\'" v-bind:selected="option.id == 1">{{ option.name }}</option>\

由于selected 是布尔属性，您必须使用v-bind:selected="<condition>"。这将根据条件的结果插入属性。

【讨论】：