Блог

Главная - Вопросы по программированию - Компонент Vue не отображает условное содержимое при выбранном переключателе

Компонент Vue не отображает условное содержимое при выбранном переключателе

#vue.js

#vue.js

Вопрос:

У меня есть компонент с переключателем выбора. Когда я нажимаю на любой из них, должны появиться дополнительные карточки. Они появляются только в том случае, если я открываю компонент и вношу изменения в файл .vue. Я не знаю, почему он не реагирует.

 <v-radio-group label="Upload a document?" v-model="upDocs">
  <v-radio name="upDocs" label="Yes" :value="1" key="1"></v-radio>
  <v-radio name="upDocs" label="No" :value="0" key="0"></v-radio>
</v-radio-group>

<v-container v-if="upDocs == 1">
  <!-- some stuff -->
</v-container>

<v-container v-else-if="upDocs == 0">
  <!-- some other stuff -->
</v-container>

Содержимое ни из одного контейнера не отображается. Что я сделал не так?

Ответ №1:

Удалите : привязку для значения v-radio и используйте строку в условии v-if.

 <v-radio-group label="Upload a document?" v-model="upDocs">
  <v-radio name="upDocs" label="Yes" value="1" key="1"></v-radio>
  <v-radio name="upDocs" label="No" value="0" key="0"></v-radio>
</v-radio-group>

<v-container v-if="upDocs == '1'">
  <!-- some stuff -->
</v-container>

<v-container v-else-if="upDocs == '0'">
  <!-- some other stuff -->
</v-container>

Ответ №2:

Используйте v-model и удалите привязку для значения

 <v-radio-group label="Upload a document?" v-model="upDocs">
  <v-radio label="Yes" value="1"></v-radio>
  <v-radio label="No" value="0"></v-radio>
</v-radio-group>

<v-container v-if="upDocs === '1'">
  <!-- some stuff -->
</v-container>

<v-container v-else-if="upDocs === '0'">
  <!-- some other stuff -->
</v-container>

Комментарии:

1. я сделал это и до сих пор не играю в кости

Ответ №3:

Код из вашего вопроса действительно работает, когда я настраиваю воспроизведение, так что это наводит меня на мысль, что ваша проблема возникает за пределами кода в вашем примере. Например, вы, возможно, забыли убедиться, что используете v-app для окружения приложения. Это требование для корректной работы Vuetify. Смотрите, как работает ваш код ниже, единственное изменение заключается в добавлении содержимого для спецификации Veutify.

 new Vue({
  el: '#root',
  vuetify: new Vuetify(),
  data () {
    return {
      upDocs: null
    }
  },
  template: `
  <v-app>
    <v-container
      class="px-0"
      fluid
    >
      <v-radio-group label="Upload a document?" v-model="upDocs">
        <v-radio name="upDocs" label="Yes" :value="1" key="1"></v-radio>
        <v-radio name="upDocs" label="No" :value="0" key="0"></v-radio>
      </v-radio-group>

      <v-container v-if="upDocs == 1">
      Yes!
      </v-container>

      <v-container v-else-if="upDocs == 0">
      No!
      </v-container>
  </v-container>
  </v-app>
          `
}) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

        <div id="root"></div>
Метки: