Question

我通过vue完成了单选按钮

<div class="flex-12-col radio-group" v-if="pet.product">
    <label>Choose a Reminder Message *</label>
    <div class="radio-group-radios">
        <div class="radio" v-for="application in pet.product.applications" :key="application.id">
            <input type="radio" :value="pet.applicationId" v-model="pet.applicationId" :name="`product-${pet.product.id}-application`" :id="`product-${pet.product.id}-application-${application.id}`">
                <label class="label" :for="`product-${pet.product.id}-application-${application.id}`">

                    <div class="quick-tooltip">
                        <div class="quick--tooltip-content align-center">
                            <!-- by default aligns to left. add class to above content wrapper 'align-right' 'align-center' to adjust positioning -->
                            <p>{{application.description}}</p>
                        </div>
                    </div>

                    {{application.name}}

                </label>
            </div>
        </div>
    </div>
</div>

有2个单选按钮。

如果应用程序ID为1，我希望选中第一个单选按钮。如果id为2，我要检查第二个按钮。

有什么想法吗？

Answer 1

如果您将每个单选按钮绑定到同一模型，则它应该可以工作。这是一个简单的示例：

  <input type="radio" id="1" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="2" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>


var app = new Vue({
    el: '#app',
    data: {
        picked: '2'
    }
});

这是一个副本，您可以使用它：https://repl.it/@jmbldwn/vueJS

根据db值检查单选按钮是否正确

1 个答案: