点击元素

Question

我有一个填充json数据的表。那么我怎么能追加一个新的cllicked元素？

        <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>

这个代码creata对我来说我的表与数据现在我想点击一个元素，并在此元素后添加新的tr。我尝试创建方法，但每个想法都会哭泣

Answer 1

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

＆＃13;

＆＃13;

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',
      })
    }
  }
})

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;