Как добавить условие в select? (Vue.JS 2)

У меня есть компонент 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 warn]: свойство или метод «опция» не определены в экземпляре, но указаны во время рендеринга. Обязательно объявляйте свойства реактивных данных в опции данных.

Как я могу это решить?

javascript,vue.js,vuejs2,vue-component,

0

Ответов: 2

1 принят

Это должно сработать. Измените свой код следующим образом.

<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>". Это добавит атрибут в зависимости от результата условного выражения.

2

Я бы передумал 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>
JavaScript, vue.js, vuejs2 вид-компонент,
Похожие вопросы
Яндекс.Метрика