Vue v-radio on a previous invisible element

Question

<div class="btn-group clearfix" data-toggle="buttons" v-radio="auth">
    <label class="btn btn-sm btn-default active">
        <input type="radio" name="auth" value="1">
        Apple
    </label>
    <label class="btn btn-sm btn-default">
        <input type="radio" name="auth" value="2">
        Banana
    </label>
    <label class="btn btn-sm btn-default" v-if="isRich">
        <input type="radio" name="auth" value="3">
        Pear
    </label>
</div>

Here the third element has a v-if on the label, and originally isRich is false when page is loaded. Then, isRich is set to be true before click on the third element. But auth value is still 1 instead of 3.

How can I get 3 instead of 1 as auth value in this case?

Answer 1

Use v-model for this.
See: https://v2.vuejs.org/v2/guide/forms.html#Radio

<div class="btn-group clearfix" data-toggle="buttons" v-radio="auth">
    <label class="btn btn-sm btn-default active">
        <input type="radio" name="auth" value="1" v-model="auth">
        Apple
    </label>
    <label class="btn btn-sm btn-default">
        <input type="radio" name="auth" value="2" v-model="auth">
        Banana
    </label>
    <label class="btn btn-sm btn-default" v-if="isRich">
        <input type="radio" name="auth" value="3" v-model="auth">
        Pear
    </label>
</div>