javascript - How can I add condition in select ? (Vue.JS 2) - Stack Overflow

admin管理员组

文章数量:1401765

I have vue ponent like this :

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

It works. No error

But, I want to add condition again in select

If it meets the conditions then selected

I add condition like this :

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>',

There exist error like this :

[Vue warn]: Property or method "option" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

How can I solve it?

I have vue ponent like this :

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

It works. No error

But, I want to add condition again in select

If it meets the conditions then selected

I add condition like this :

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>',

There exist error like this :

[Vue warn]: Property or method "option" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

How can I solve it?

• javascript
• vue.js
• vuejs2
• vue-ponent

Share Improve this question Follow edited Mar 24, 2017 at 13:27 Jonatas Walker 14.2k66 gold badges5757 silver badges8282 bronze badges asked Mar 24, 2017 at 13:11 moses tohmoses toh 13.2k8181 gold badges265265 silver badges459459 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

This should work. Change your code like this.

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

Since selected is boolean attribute you'll have to use v-bind:selected="<condition>". This will insert the attribute based on the conditional's result.

I would change to a v-model based:

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

本文标签： javascriptHow can I add condition in select(VueJS 2)Stack Overflow