Как отлаживать меню выбора, которое не выбрано?

У меня есть это меню выбора

<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"
  }
]

Почему мой выбор не выбрал Hourly в качестве выбранного значения?

Вы имеете в виду, что он продолжает просто показывать метку (Frequency), даже когда выбрано значение (например, Daily)?

— 09.05.2022 23:48

vue.js select vuejs2 vue-component vuetify.js

09.05.2022 23:03

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вот живая, рабочая демонстрация, используя ваш пример.

Или, для сокращенной версии здесь:

// 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>

10.05.2022 00:09

Я не уверен, с какой проблемой вы столкнулись, но метка не отображается при выборе любой опции из <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/[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>

10.05.2022 08:20