在选择箱上显示初始v模型值。

Question

我在vue中有一个选择框，它具有初始的v模型值，我想在选择框上显示它的值，但实际上我不知道如何做。如果有人能帮上忙，我真的很乐意

​

new Vue({
  el: "#demo",
  data() {
    return {
    newRecordDurationName: '2min',
           recordDuration: [
        { id: 1, name: "2 min" },
        { id: 2, name: "5 min" },
        { id: 3, name: "10 min" },
        { id: 4, name: "15 min" },
        { id: 5, name: "30 min" },

      ],
    };
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo" class="container">

<select
              v-model="newRecordDurationName"
              class="w-75 mr-auto text-dark radius-8 py-2"
              name=""
              id=""
            >
              <option
                v-for="type in recordDuration"
                :key="type.id"
                :value="type.id"
              >
                {{ type.name }}
              </option>
            </select>
            </div>

​

Answer 1

您需要将所需值的id设置为v-model (newRecordDurationName)，而不是name。检查下面的更新代码。因此，如果您希望‘2分钟’为默认值，然后设置1，如果您希望'10分钟‘作为默认值，然后将v-model设置为3，。就像这样

​

new Vue({
  el: "#demo",
  data() {
    return {
    newRecordDurationName: 1,
           recordDuration: [
        { id: 1, name: "2 min" },
        { id: 2, name: "5 min" },
        { id: 3, name: "10 min" },
        { id: 4, name: "15 min" },
        { id: 5, name: "30 min" },

      ],
    };
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo" class="container">

<select
              v-model="newRecordDurationName"
              class="w-75 mr-auto text-dark radius-8 py-2"
              name=""
              id=""
            >
              <option
                v-for="type in recordDuration"
                :key="type.id"
                :value="type.id"
              >
                {{ type.name }}
              </option>
            </select>
            </div>

​

Answer 2

实际上，这是一个错误，我正在设置id并显示数据，如果我给出一个id给v-模型，它就会工作。