时间戳

首页 > 解决方案 > 当我使用 v-model 时，Selected 不起作用？

javascript - 当我使用 v-model 时，Selected 不起作用？

问题描述

我知道如果我使用 selected 不起作用v-model，但我v-model用来获取选定的用户并在我的 firebase 中使用它，所以我的 html 是这样的：

<select v-model="medespeler1" class="inputbox rounded" required>
  <option v-for="(option, i) in medespelers" :key="i" :selected="selected">{{ medespelers[i] }}</option>
</select>

然后在数据属性中，我得到了这个也得到了所有medespelers存储在数据库中的值和medespeler1值：

data: function() {
  return {
    medespelers:[],
    medespeler1: '',
  }
},

在firebase中，我将所有内容都设置medespelers在一个数组中并将其传递给数据属性，但是因为我需要将medespeler1值发送到我不能使用的数据属性:selected，因为那不起作用。我从哪里开始，以便它也存储medespeler1值并在数组中有一个选定的项目？

标签： javascriptvue.jsvuejs2vue-componentv-model

解决方案

由于 select 使用的是medespeler1for v-model，所以必须做的就是设置 的值，medespeler1然后<select>将对其做出反应：

new Vue({
  el: "#app",
  data() {
    return {
      medespeler1: "banana"
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select v-model="medespeler1">
     <option>apple</option>
     <option>banana</option>
     <option>cherry</option>
  </select>
  
  Selected: {{ medespeler1 }}
</div>

推荐阅读