[Vuejs]-Vue component not rendering conditional content when radio button selected

by

0👍

Remove : binding for value of v-radio, and use string in v-if condition.

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

0👍

Use v-model and remove bind for value

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

0👍

The code from your question does work when I set up a reproduction, so that leads me to believe your problem is occurring outside of the code in your example. For instance, you may have forgotten to make sure to use v-app to surround the app. That is a requirement for Vuetify to work correctly. See your code working below with the only change being in adding containment per Veutify spec.

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>

Leave a comment