如何调试未 select 的 select 菜单？

Question

我有这个 select 菜单：

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

&我一直看到这个：

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

 {{ frequency }} {{ frequencies }}

Hourly

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

为什么我的 select 没有 select 每小时 selected 值？

Answer 1

这里是 live, working demo 使用您的示例。

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

// 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/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.5/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.5/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/@mdi/font@6.x/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

我不确定您遇到了什么问题，但 select <v-select> 的任何选项上都没有显示标签。我创建了一个示例代码片段供参考，您能否看一下，如果需要任何进一步的帮助，请告诉我。

演示 :

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/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.5/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.5/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/@mdi/font@6.x/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>

如何调试未 select 的 select 菜单？

How to debug select menu not selected?

select

vue.js

vue-component

vuejs2

vuetify.js

这里是 live, working demo 使用您的示例。