How to v-bind the button id attribute using Vuejs?-CodePudding

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.

CodePudding user response：

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 :

CodePudding user response：

<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