How can I add condition in select ? (Vue.JS 2)

Question

I have vue component 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?

abhishekkannojia · Accepted Answer · 2017-03-24 13:29:47Z

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.

edited Mar 24, 2017 at 13:29

answered Mar 24, 2017 at 13:22

abhishekkannojia

2,86625 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-15 22:20:00Z

4

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>

edited Jul 15, 2022 at 22:20

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 24, 2017 at 13:25

Jonatas Walker

14.3k6 gold badges57 silver badges82 bronze badges

Collectives™ on Stack Overflow

How can I add condition in select ? (Vue.JS 2)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related