Vuejs在单击元素后附加html

Question

我有一个表格，里面有来自 json 的数据。那么我如何在单击元素后追加一个新元素？

        <tbody>
          <tr v-for="f in firm" class="main" >
            <td id="ccc">{{ f.name.toUpperCase() }}</td>
            <td>{{ f.open }}</td>
            <td>{{ f.max }}</td>
            <td>{{ f.min }}</td>
            <td>{{ f.close }}</td>
            <td>{{ f.change }}</td>
            <td>{{ f.trans }}</td>
            <td>{{ f.vol }}</td>
          </tr>
        </tbody>

这段代码为我创建了带有数据的表格现在我想单击一个元素，然后在该元素之后附加新的 tr。我尝试创建方法，但我的每一个想法都失败了

Answer 1

如果您更改 HTML 正在呈现的数据，HTML 将自动更新。由于代码为firm 数组中的每个项目呈现<tr>，因此将一个项目添加到firm 数组以创建一个新的<tr>。请参阅下面的演示。

new Vue({
  el: '#app',
  data: {
    firm: []
  },
  methods: {
    addRow() {
      this.firm.push({
        name: 'new row',
        open: 'open',
        max: 'max',
        min: 'min',
        close: 'close',
        change: 'change',
        trans: 'trans',
        vol: 'vol',
      })
    }
  }
})

<div id="app">
  <button @click="addRow">Add new row</button>
  <table>
    <tbody>
      <tr v-for="f in firm" class="main">
        <td id="ccc">{{ f.name.toUpperCase() }}</td>
        <td>{{ f.open }}</td>
        <td>{{ f.max }}</td>
        <td>{{ f.min }}</td>
        <td>{{ f.close }}</td>
        <td>{{ f.change }}</td>
        <td>{{ f.trans }}</td>
        <td>{{ f.vol }}</td>
      </tr>
    </tbody>
  </table>
</div>
<script src="https://unpkg.com/vue"></script>