Vue JS выбрать вариант не появляется из-за V-модели - PullRequest
Новая
       4

Vue JS выбрать вариант не появляется из-за V-модели

0 голосов
/ 21 марта 2019

Хорошо, я работаю над кодом, который позволяет пользователю менять магазин, к которому он принадлежит. Я использую тег, и в нем у меня есть V-модель. в теге я использую цикл for, чтобы указать магазины, из которых пользователь может выбирать.

Вот мой код: 

<div v-if="contestant.stores.length > 1" class="mt-10 col-sm-10">
    <select class="form-control" v-model="riot_account_store"  v-on:change="onChangeStore()">
        <option v-for="store in contestant.stores" :key="store.objectId" :value="store.objectId">{{ store.name }}</option>
    </select>
</div>

Все, что я хочу сейчас, это добавить «неизмененное» значение по умолчанию, чтобы оно отображалось ПЕРВЫМ перед всеми вариантами выбора. В основном простой <option>unchanged</option> ничего особенного. Проблема в том, что когда я добавляю любую другую опцию, она просто пропускается. Это все еще появляется, если я нажимаю на выбор, и это появляется выше первого выбора из цикла. Так что он компилируется, а не «выбирается» в качестве первого значения. Понятия не имею, в чем проблема. Есть мысли?

Ответы [ 3 ]

0 голосов
/ 21 марта 2019

Вам нужно будет где-то сохранить первоначальный выбор, например, в блоке данных: 

data() {
    return {
        initialSelection: { objectId: 10, name: 'Generic store name' } // you can set this property for example in the mounted() lifecycle-hook
    }

Затем отредактируйте ваш -Tag на: 

<option v-for="store in contestant.stores" :key="store.objectId" :value="store.objectId">{{ store.objectId === initialSelection.objectId ? 'unchanged' : store.name }}</option>
0 голосов
/ 21 марта 2019

Вашему варианту нужно значение. Вот и все: 

const app = new Vue({
  el: '#app',
  data: {
    riot_account_store: null,
    stores: [
      { objectId: 12, name: 'Foo' },
      { objectId: 13, name: 'Bam' },
      { objectId: 14, name: 'Baz' },
    ],
  },
  methods: {
    onChangeStore() {
      console.log(this.riot_account_store);
    },
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-if="stores.length > 1" class="mt-10 col-sm-10">
    <p>Selected: {{ riot_account_store }}</p>
    <select class="form-control" v-model="riot_account_store"  v-on:change="onChangeStore()">
          <option :value="null">unselect</option>
          <option v-for="store in stores" :key="store.objectId" :value="store.objectId">{{ store.name }}</option>
      </select>
  </div>
</div>
0 голосов
/ 21 марта 2019

Добавьте ваше значение по умолчанию option, присвойте value, которое не будет взято, и начните v-model со значения.Обязательство Vue позаботится обо всем остальном. 

<div v-if="contestant.stores.length > 1" class="mt-10 col-sm-10">
 <select class="form-control" v-model="riot_account_store"  v-on:change="onChangeStore()">
    <option value="not_taken_id">default</option>
    <option v-for="store in contestant.stores" :key="store.objectId" :value="store.objectId">{{ store.name }}</option>
 </select>
</div>

date () {
  return {
    riot_account_store: 'not_taken_id'
  }
}
...