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

Posted 2023-02-23

【中文标题】由于 v-model，Vue js 选择选项未出现

【英文标题】：Vue js select option not appearing due to v-model

【发布时间】：2019-08-12 09:18:06

【问题描述】：

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

【参考方案1】：

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

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>

【参考方案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>

【参考方案3】：

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