0
301
ViewsHow to v-bind the button id attribute using Vuejs?
I'm sure there is a way to do that, but I can't understand why it doesn't work for me (I'm completely new to vuejs)
I tried using the button tag:
<div v-for="line in lines">
<button v-bind:id="line.id" name="availabilityCheck" type="button">
Check availability
</button>
</div>
And the button type input:
<div v-for="line in lines">
<input v-bind:id="line.id" name="availabilityCheck" type="button" value="Check availability" />
</div>
What happens is that the browser removes the part v-bind:id="line.id" so basically the generated buttons do not have an id.
·
Santiago Trujillo
2 answers
Answer question0
I am not sure why it is not working for you but it should ideally work if your lines array contains id property in the objects.
Demo :
new Vue({
el: '#app',
data: {
lines: [{
id: 1
}, {
id: 2
}, {
id: 3
}, {
id: 4
}, {
id: 5
}]
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="line in lines" :key="line.id">
<input v-bind:id="line.id" name="availabilityCheck" type="button" value="Check availability" />
</div>
</div>Screenshot :
·
Santiago Trujillo
Report
0
<div v-for="line in lines">
<button :id="'lin'+line.id" name="availabilityCheck"
type="button">
Check availability
</button>
</div>
Add a constant on prefix may be it work
·
Santiago Trujillo
Report
Answer question