如何在select中添加条件？ （Vue.JS 2）

Question

我有这样的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>

有效。没有错误

但是，我想在select

中再次添加条件

如果符合条件，则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警告]：未在实例上定义属性或方法“选项”   但在渲染期间引用。确保声明反应数据   数据选项中的属性。

我该如何解决？

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

Answer 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>"。这将根据条件的结果插入属性。