如何使用 Vuejs v-bind 按钮 id 属性？

Question

我确定有办法做到这一点，但我不明白为什么它对我不起作用（我是 vuejs 的新手）

我尝试使用按钮标签：

<div v-for="line in lines">
    <button v-bind:id="line.id" name="availabilityCheck" type="button">
        Check availability
    </button>
</div>

以及按钮类型输入：

<div v-for="line in lines">
    <input v-bind:id="line.id" name="availabilityCheck" type="button" value="Check availability" />
</div>

浏览器删除了 v-bind:id="line.id" 部分，所以基本上生成的按钮没有 ID。

Answer 1

<div v-for="line in lines">
    <button :id="'lin'+line.id" name="availabilityCheck" 
        type="button">
        Check availability
    </button>
</div>

在前缀上添加常量可能有效

Answer 2

我不确定为什么它对你不起作用，但如果你的行数组在对象中包含 id 属性，它应该可以正常工作。

演示：

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>

截图:

如何使用 Vuejs v-bind 按钮 id 属性？

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

javascript

vue.js

vuejs2