Sometimes, we want to set a radio button checked if statement is true with Vue.js.

In this article, we’ll look at how to set a radio button checked if statement is true with Vue.js.

How to set a radio button checked if statement is true with Vue.js?

To set a radio button checked if statement is true with Vue.js, we should set the checkbox’s checked prop.

For instance, we write

<template>
  <div>
    <div v-for="portal in portals">
      <input
        type="radio"
        name="portalSelect"
        v-model="newPortalSelect"
        :checked="portal.id == currentPortalId"
      />
    </div>
  </div>
</template>

to add the checked prop and set it to portal.id == currentPortalId.

As a result, when portal.id == currentPortalId returned true, we see the radio button selected.

Conclusion

To set a radio button checked if statement is true with Vue.js, we should set the checkbox’s checked prop.