Question

好的，所以我正在研究一些允许用户更改其所属商店的代码。我正在使用标签，并且在其中有一个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>没什么特别的。问题是当我添加任何其他选项时，它只是被跳过了。如果我按下选择键，它仍然会出现，并且它会出现在循环中第一个选项的上方。因此，它只是不被“选择”为第一个值而被编译。不知道是什么问题。有什么想法吗？

Answer 1

添加您的默认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'
  }
}

Answer 2

您必须将“初始”选择存储在某个位置，例如在数据块中：

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>

Answer 3

您的选项需要一个值。就是这样：

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>

由于v-model，Vue JS选择选项未出现

3 个答案: