这里我正尝试使用Vue Js点击“ +”时生成新行
但出现错误:tablerows
未定义
Vue.component('inp-row', { props: ['data'], template: `<tr :id="data.row_id" ><td> 1</td><td>2 </td><td>3 </td><td>4 </td><td>5 </td><td>6 </td><td>7 </td></tr>`, }) var rft = new Vue({ el: "#prodtable", data: { tablerows: [{ id: 0, row_id: 'row' }, { id: 1, row_id: 'row1' }, ], counter: 1, }, methods: { addRow: function() { this.counter++; this.tablerows.push({ id: this.counter, row_id: 'row' + this.counter }); } } });
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <table class="table table-bordered table-striped"> <thead> <th>№</th> <th>Category</th> <th>Prod. name</th> <th>Amount</th> <th>Deadline</th> <th>Price</th> <th>Percentage</th> </thead> <tbody id="prodtable"> <inp-row v-for="item in tablerows" v-bind:data="item" v-bind:key="item.id"> </inp-row> <tr @click="addRow()"> <td colspan="7" class="text-center"><i class="material-icons">add</i></td> </tr> </tbody> </table>
这里,我试图使用Vue Js在单击“ +”时生成新行,但出现错误:未定义表行Vue.component('inp-row',{道具:['data'],模板: `
您应该使用<tr ... is='inp-row'></tr>
而不是<inp-row ...></inp-row>