Reputation: 157
I am working on functionality in alpine js where I need to add a radio button inside the template tag. Here is what I am doing.
<div class="customRadioStyle">
<template x-for="name in record.names">
<input type="radio" :value="name.value" :id="name.id">
<label :for="name.id" x-text="name.value"></label>
</template>
</div>
But this code gives me the following error.
Alpine: <template> tag with [x-for] encountered with an unexpected number of root elements. Make sure <template> has a single root element.
Is there any solution for this?
I check this link too but still not able to find a solution for this. https://github.com/alpinejs/alpine/issues/539
Any help would be appreciated.
Upvotes: 1
Views: 2041
Reputation: 21191
Just do what the error says and make sure there's a single element inside the <template>
. In you case, you can just add the <input>
inside the <label>
or wrap them both with a <div>
:
window.MyComponent = () => ({
names: [{
id: 'name1',
value: 'Name 1',
}, {
id: 'name2',
value: 'Name 2',
}, {
id: 'name3',
value: 'Name 3',
}],
});
body {
font-family: monospace;
}
label {
display: flex;
align-items: center;
padding: 4px 0;
}
input {
margin: 0 8px 0 0;
}
<div x-data="MyComponent()">
<template x-for="name in names">
<label :for="name.id">
<input type="radio" :value="name.value" :id="name.id" name="radioGroup">
<span x-text="name.value"></span>
</label>
</template>
</div>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>
Note that in the event handler I'm still calling it e
, but in the HTML I've used download($event)
instead of download(e)
.
Upvotes: 1