Vue.JS table 数据未显示在行中

Question

我似乎无法在输入时将数据记录到新行中，并且它已经停止显示以前显示的虚拟数据。我真的不明白我做错了什么，所以非常感谢任何专家反馈。

new Vue({

      el: '#app',
      data: {
        items: [

          {
            'id': 1,
            'product': 'Mario Kart',
            'cost': 39.99
          },
          {
            'id': 2,
            'product': 'Call of Duty',
            'cost': 129.99
          },
          {
            'id': 3,
            'product': 'PS4',
            'cost': 169.99
          }

        ],

        new_item: [

          {
            'id': '',
            'product': '',
            'cost': ''
          }

        ]

      },

      // calculate total cost of all items

      computed: {

        result: function() {

          return Object.values(this.items).reduce((t, {
            cost
          }) => t + cost, 0)

        },

      },

      // add and remove items

      methods: {

        deleteItem: function(index) {

          console.log("Removed", index);
          this.items.splice(index, 1);

        },

        addItem: function() {

          console.log("Added");
          this.items.push({
            'id': '',
            'items.product': '',
            'items.cost.toFixed(2)': ''
          });

        }
      } // close methods

    }); // close new Vue

<section class="section">
      <div id="app" class="container">
        <table class="table is-striped is-fullwidth">

          <tr class="th">
            <th>Index</th>
            <th>Products</th>
            <th>Cost</th>
            <th></th>
          </tr>

          <tr class="items" v-for="(item, index) in items" :key="'itm'+index">

            <td class="index"> {{ index+1 }} </td>
            <td class="service"> {{ items.product }} </td>
            <td class="price"> £{{ items.cost }} </td>
            <td> <button class="button is-small is-danger" @click='deleteItem(index)'>Delete</button> </td>

          </tr>

          <tr class="add_new_item" v-for="(new_items, index) in new_item" :key="'new_itm'+index">
            <th> </th>
            <th> <input class="input is-small" type="text" placeholder="Item Name" v-model="new_items.product"> </th>
            <th> <input class="input is-small" type="text" placeholder="The Price" v-model="new_items.cost"> </th>
            <th> <button class="button is-info is-small" @click='addItem()'>Add To List</button> </th>
          </tr>

          <tr class="is-selected">

            <td>Total</td>
            <td></td>
            <td>£{{ result.toFixed(2) }}</td>
            <td></td>

          </tr>
        </table>
      </div>
    </section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Answer 1

无需为新项目创建新对象并循环遍历它。我修改了你的代码。请参考以下内容

new Vue({

      el: '#app',
      data: {
        items: [

          {
            'id': 1,
            'product': 'Mario Kart',
            'cost': 39.99
          },
          {
            'id': 2,
            'product': 'Call of Duty',
            'cost': 129.99
          },
          {
            'id': 3,
            'product': 'PS4',
            'cost': 169.99
          }

        ],
        currentItemId: 0,
        product: '',
        cost: ''
      },

      // calculate total cost of all items

      computed: {

        result: function() {

          return Object.values(this.items).reduce((t, {
            cost
          }) => t + cost, 0)

        },

      },
      created: function() {
         this.currentItemId = this.items.length + 1;
      },
      // add and remove items

      methods: {

        deleteItem: function(index) {

          console.log("Removed", index);
          this.items.splice(index, 1);

        },

        addItem: function() {

          console.log("Added");
          this.items.push({
            'id': this.currentItemId++,
            'product': this.product,
            'cost': this.cost
          });

          this.product = '';
          this.cost = '';

        }
      } // close methods

    }); // close new Vue

<section class="section">
      <div id="app" class="container">
        <table class="table is-striped is-fullwidth">

          <tr class="th">
            <th>Index</th>
            <th>Products</th>
            <th>Cost</th>
            <th></th>
          </tr>

          <tr class="items" v-for="(item, index) in items" :key="index">

            <td class="index"> {{ index+1 }} </td>
            <td class="service"> {{ item.product }} </td>
            <td class="price"> £{{ item.cost }} </td>
            <td> <button class="button is-small is-danger" @click='deleteItem(index)'>Delete</button> </td>

          </tr>

          <tr class="add_new_item">
            <th> </th>
            <th> <input class="input is-small" type="text" placeholder="Item Name" v-model="product"> </th>
            <th> <input class="input is-small" type="text" placeholder="The Price" v-model="cost"> </th>
            <th> <button class="button is-info is-small" @click='addItem()'>Add To List</button> </th>
          </tr>

          <tr class="is-selected">

            <td>Total</td>
            <td></td>
            <td>£{{ result }}</td>
            <td></td>

          </tr>
        </table>
      </div>
    </section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Answer 2

我更正了几处，

不需要删除 new_item 数组，您只需将输入值存储在数据中。

product: '',
cost: '',
lastIndex: 3

lastIndex 初始化为 3，因为您的数据项中已经有 3 个项目。

要在项目列表中推送的对象以及如何获取该信息。

this.items.push({
  'id': this.lastIndex,
  'product': this.product,
  'cost': parseFloat(this.cost)
});

这里执行了一个 parseFloat，因为我们得到了一个字符串作为输入。可以执行额外的工作来检查它是一个数字，或者将输入更改为仅允许数字。

删除了您的迭代以显示插入的新项目。

现在看起来：

<tr class="add_new_item">
   <th> </th>
   <th> <input class="input is-small" type="text" placeholder="Item Name" v-model="product"> </th>
   <th> <input class="input is-small" type="text" placeholder="The Price" v-model="cost"> </th>
   <th> <button class="button is-info is-small" @click='addItem()'>Add To List</button> </th>
</tr>

最后，修改了如何从项目列表中读取信息

<tr class="items" v-for="(item, index) in items" :key="'itm'+index">
  <td class="index"> {{ item.id }} </td>
  <td class="service"> {{ item.product }} </td>
  <td class="price"> £{{ item.cost }} </td>
  <td> <button class="button is-small is-danger" @click='deleteItem(index)'>Delete</button> </td>
</tr>

new Vue({

      el: '#app',
      data: {
        items: [

          {
            'id': 1,
            'product': 'Mario Kart',
            'cost': 39.99
          },
          {
            'id': 2,
            'product': 'Call of Duty',
            'cost': 129.99
          },
          {
            'id': 3,
            'product': 'PS4',
            'cost': 169.99
          }

        ],
        product: '',
        cost: '',
        lastIndex: 3

      },

      // calculate total cost of all items

      computed: {

        result: function() {

          return Object.values(this.items).reduce((t, {cost}) => t + cost, 0);

        },

      },

      // add and remove items

      methods: {

        deleteItem: function(index) {

          console.log("Removed", index);
          this.items.splice(index, 1);

        },

        addItem: function() {

          console.log("Added");
          this.lastIndex += 1;
          
          this.items.push({
            'id': this.lastIndex,
            'product': this.product,
            'cost': parseFloat(this.cost)
          });
          
          this.product = '';
          this.cost = '';

        }
      } // close methods

    }); // close new Vue

<section class="section">
      <div id="app" class="container">
        <table class="table is-striped is-fullwidth">

          <tr class="th">
            <th>Index</th>
            <th>Products</th>
            <th>Cost</th>
            <th></th>
          </tr>

          <tr class="items" v-for="(item, index) in items" :key="'itm'+index">

            <td class="index"> {{ item.id }} </td>
            <td class="service"> {{ item.product }} </td>
            <td class="price"> £{{ item.cost }} </td>
            <td> <button class="button is-small is-danger" @click='deleteItem(index)'>Delete</button> </td>

          </tr>

          <tr class="add_new_item">
            <th> </th>
            <th> <input class="input is-small" type="text" placeholder="Item Name" v-model="product"> </th>
            <th> <input class="input is-small" type="text" placeholder="The Price" v-model="cost"> </th>
            <th> <button class="button is-info is-small" @click='addItem()'>Add To List</button> </th>
          </tr>

          <tr class="is-selected">

            <td>Total</td>
            <td></td>
            <td>£{{ result }}</td>
            <td></td>

          </tr>
        </table>
      </div>
    </section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Vue.JS table 数据未显示在行中

Vue.JS table data not showing in row

html

javascript

data-entry

vue.js