VueJS initially mark first radiobutton as 'checked' - vue.js

Question

How can I initially mark first radio-button as 'checked'?
items =
[
{txt: 'foo', val: 1},
{txt: 'bar', val: 2}
]
<div v-for="item in items">
<input name="myfield" type="radio" v-bind:value="item.val" v-bind:checked="item.val==comparisonvalue">
<label>{{ item.txt }}</label>
</div>

Answer 1

You probably want to use v-model to bind the input to your data, in which case set an item (e.g. myInput) in your data and then initialize it with the first value in your items array:
new Vue({
el: '#app',
data: {
myInput: 1,
items:
[
{txt: 'foo', val: 1},
{txt: 'bar', val: 2}
]
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<div id='app'>
<div v-for="item in items">
<input
name="myfield"
type="radio"
v-bind:value="item.val"
v-model="myInput">
<label>{{ item.txt }}</label>
</div>
</div>
Under most circumstances, you might get the items from an API call, and then you can initialize it in created:
new Vue({
el: '#app',
data: {
myInput: null,
items: null
},
created () {
this.items = [
{txt: 'foo', val: 1},
{txt: 'bar', val: 2}
] // or from an API call
this.myInput = this.items[0].val
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<div id='app'>
<div v-for="item in items">
<input
name="myfield"
type="radio"
v-bind:value="item.val"
v-model="myInput">
<label>{{ item.txt }}</label>
</div>
</div>
Or get the index in v-for and then check whether index === 0 at the input:
new Vue({
el: '#app',
data: {
items:
[
{txt: 'foo', val: 1},
{txt: 'bar', val: 2}
]
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<div id='app'>
<div v-for="(item, index) in items">
<input
name="myfield"
type="radio"
v-bind:value="item.val"
v-bind:checked="index === 0">
<label>{{ item.txt }}</label>
</div>
</div>