在选择框上显示初始 v-model 值

Question

我在 vue 中有一个具有初始 v-model 值的选择框，我想在选择框上显示它的值，但实际上我不知道该怎么做。如果有人能提供帮助，我将不胜感激

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。检查下面的更新代码。因此，如果您希望将“2min”作为默认值，则设置 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和显示数据的错误如果我给 v-model 一个 id，它将起作用

在选择框上显示初始 v-model 值

Showing initial v-model value on selectbox

vue.js