如何调试未选择菜单？

Question

我有此选择菜单：

<v-select
  dense
  outlined
  item-text="name"
  item-value="id"
  :items="frequencies"
  v-model="frequency"
  label="Frequency"
></v-select>

＆amp;我一直看到这一点：

如果我将其打印出来似乎包含正确的值：

 {{ frequency }} {{ frequencies }} 

Hourly 

[
  {
    "id": 1,
    "name": "Hourly"
  },
  {
    "id": 2,
    "name": "Daily"
  },
  {
    "id": 3,
    "name": "Weekly"
  },
  {
    "id": 4,
    "name": "Monthly"
  },
  {
    "id": 5,
    "name": "Perpetual"
  }
]

为什么我的选择不小时选择作为选定值？

Answer 1

这是一个。

---

或者，对于此处的缩短版本：

// Hide Vue dev warnings, just for the demo
Vue.config.devtools = false;
Vue.config.productionTip = false;
// Demo Vue app, using vuetify
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    frequency: null, // ID of currently selected frequenct
    frequencies: [ // List of values to display in the dropdown
      { id: 1, name: "Hourly" },
      { id: 2, name: "Daily" },
      { id: 3, name: "Weekly" },
      { id: 4, name: "Monthly" },
      { id: 5, name: "Perpetual" },
      { id: "XX", name: "Broken" },
    ],
  }),
})

p.demo { font-size: 1.5rem; text-align: center; background: yellow; }
p.demo.init { background: aqua; }
p.demo.broke { background: hotpink; }

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/@mdi/[email protected]/css/materialdesignicons.min.css"/>
<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <!-- v-select, from your question -->
      <v-select
        dense
        outlined
        item-text="name"
        item-value="id"
        :items="frequencies"
        v-model="frequency"
        label="Frequency"
      ></v-select>
      Selected Frequency : {{ frequency }}
      <!-- Display what's selected, just for the demo  -->
      <p class="demo" v-if="frequency && frequencies[frequency - 1]">
        Frequency: {{ frequency }} ({{ frequencies[frequency - 1].name }})
      </p>
      <p class="demo broke" v-else-if="frequency">
        Invalid Frequency Selected ({{ frequency }})
      </p>
      <p class="demo init" v-else>No value selected yet</p>
    </v-container>
  </v-app>
</div>

Answer 2

我不确定您面临哪个问题，但标签未从＆lt; v-select＆gt; 上选择任何选项显示。我创建了一个示例代码片段以供参考，您可以看看是否需要进一步的帮助。

演示：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    frequency: null,
    frequencies: [
      {
        "id": 1,
        "name": "Hourly"
      },
      {
        "id": 2,
        "name": "Daily"
      },
      {
        "id": 3,
        "name": "Weekly"
      },
      {
        "id": 4,
        "name": "Monthly"
      },
      {
        "id": 5,
        "name": "Perpetual"
      }
    ]
  }),
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/@mdi/[email protected]/css/materialdesignicons.min.css"/>
<div id="app">
  <v-app id="inspire">
    <v-container fluid>
          <v-select
            :items="frequencies"
            item-text="name"
            item-value="id"
            label="Frequency"
            v-model="frequency"
            outlined
          ></v-select>
          Selected Frequency : {{ frequency }}
    </v-container>
  </v-app>
</div>