[Vuejs]-How can I add condition in select ? (Vue.JS 2)

by

3👍

✅

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.

👤abhishekkannojia

3👍

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>
👤Jonatas Walker

Leave a comment