[Vuejs]-Use radio button to show or hide divs in Vue 3

by

1👍

✅

The problem is not that you’re not binding the value, it is that the value is not set as a boolean. If you use v-bind then it gets converted to a boolean.

So you should use v-bind:value="true" (or the shorthand `:value="true")

otherwise, you could do v-if="showFirst === 'true'"
or, for fun, get creative with number values (input: value="0" and then v-if: Boolean(parseInt(showFirst))

example

  var app = Vue.createApp({
    data() {
      return {
        showFirst: true,
      };
    },
  });

  app.mount("#app");
<script src="https://unpkg.com/vue@3.0.5"></script>
<div id="app">
  <div>
    <label><input type="radio" v-model="showFirst" value="true" />First View</label
    ><br />
    <label><input type="radio" v-model="showFirst" value="false" />Second View</label>
  </div>
  {{ showFirst }}

  <div v-if="showFirst === 'true'">First view</div>
  <div v-else>Second view</div>
</div>
👤Daniel

3👍

v-model is a two-way binding shorthand for :modelValue="" together with @update:modelValue="". In Vue 2, it used to be :value="" and @input="". You should only use either v-model or the other one.

When you add a property value="true", it means that you are passing the string "true" as a value to the component. When using a colon before value, you pass an expression, which evaluates to a value. So, adding :value="true" actually passes to evaluated expression down, which is a boolean (it could also be a variable, a calculation etc.). v-bind: is equal to just a colon :, usually the short form is used.

See also the docs to v-model from Vue.

👤ssc-hrep3

Leave a comment