How to conditionally render an element, based on what radio button is checked with Vue.js

Question

I have a form built with bootstrap-vue, the radio button code looks something like this:

    <b-form-group label="Claim Type">
         <b-form-radio-group
              id="claimType"
              required
              v-model="form.claimType"
              :options="claimTypeOptions"
              name="claimType"
              stacked>
         </b-form-radio-group>
    </b-form-group>

And my script looks something like this:

     data() {
      return {
      form: {
       claimType: ""
      },
       claimTypeOptions: [
         { text: "Option 1", value: "Option 1" },
         { text: "Option 2", value: "Option 2" }
       ]
  }

When I select option 1, I want to use v-if to render a block or hide the block if the other radio button is selected. but how do I reference the state of the radio buttons in my v-if directive correctly? Or is there a better/simpler approach for this?

Not sure I understand your code, but, to answer your question`v-if="form.claimType === 'Option 1'"` — Stephen Thomas, Sep 06 '19 at 13:35

score 3 · Accepted Answer · answered Sep 06 '19 at 15:16

3

Just use your v-model as the statement to check. Ex.

<div v-if="form.claimType === 'Option 1'">
    <span>Show me </span>
</div>

answered Sep 06 '19 at 15:16

Luca Rossi

746
5
18

How to conditionally render an element, based on what radio button is checked with Vue.js

1 Answers1