Vue: select не обновляет начальное значение после задержки - PullRequest
Новая
       2

Vue: select не обновляет начальное значение после задержки

0 голосов
/ 07 мая 2020

Я попытался создать компонент с select, для которого я загружаю некоторые данные и использую его с v-моделью извне.
Когда я использую v-модель внутри, все работает, но когда я использую: value и @change начальное значение не изменяется должным образом.
Я хочу знать, как исправить второй компонент, чтобы он работал с v-моделью снаружи, но user: value и @change внутри.

Здесь вы можете увидеть минимальный пример :
https://jsfiddle.net/5rdtf4ns/

<div id="app">
  <div class="c">
    <p>{{firstValue}}</p>
    <app-select 
      :options="options"
      v-model="firstValue"
    />
  </div>
  <div class="c">
    <p>{{secondValue}}</p>
    <app-select2 
      :options="options2"
      v-model="secondValue"
    />
  </div>
</div>

const options = [
      { value: 'first' },
      { value: 'second' },
      { value: 'secret' }
    ];
const getData = () =>
new Promise((resolve) => {
    setTimeout(resolve(options), 2000);
});

Vue.component('app-select', {
  props: ['value', 'options'],
    template: `<select v-model="value">
      <option
        v-for="{value} in options"
          :key="value"
      >{{value}}</option>
    </select>`
});

Vue.component('app-select2', {
  props: ['value', 'options'],
    template: `<select @change="onChange" :value="value">
      <option
        v-for="{value} in options"
          :key="value"
      >{{value}}</option>
    </select>`,
  methods: {
    onChange(e) {
        this.$emit('input', e.target.value);
    }
  }
});

new Vue({
  el: "#app",
  data: {
      options: [],
    firstValue: '',
    options2: [],
    secondValue: '',
  },
  created() {
    getData()
      .then((data) => {
        this.options = data;
        this.firstValue = 'second';
        this.options2 = data;
        this.secondValue = 'second';
     });
  }
});
...