表引导 vue答案

【问题标题】：Table bootstrap vue表引导 vue
【发布时间】：2020-04-07 15:30:52
【问题描述】：

我用 bootstrap vue 创建了一个表。我需要根据所选数量增加价格值。因此，如果我选择 2 个产品，价格将乘以 2，依此类推。我的问题是我无法访问数量单元格的值。

<template v-slot:cell(price)="data">
            <span>{{data.item.price = data.item.price * value}}</span>
          </template>
          <template v-slot:cell(quantity)="data">
            <b-col sm="4">
              <b-form-input value="1" min="1" :max="data.item.quantity" type="number"></b-form-input>
            </b-col>
          </template>

【问题讨论】：

问题不清楚。为什么不能将 v-model 绑定添加到数量输入（或等效项，我对 b-form-input 进行假设），然后使用它而不是 value？
因为制作了一个 v 模型，所以我的值被传递给该输入中表的所有元素。我不明白如何为每个元素分配值。
为什么不尝试为每个表格行制作一个单独的组件？然后每一行都有自己的数量。
基于这个{{ data.item.price = data.item.price * value }}，你想实际更新对象中的价格吗？还是只希望它显示？
一个单位的价格保持不变，但价格乘以所选数量会显示在屏幕上。

标签： vue.js

【解决方案1】：

您应该将输入值存储在每个对象上，而不是 data 中的全局值。这样它是每行的。

new Vue({
  el: '#app',
  data() {
    return {
      fields: [
        'price',
        'quantity',
        'total'
      ],
      items: [{
          price: 550,
          quantity: 5,
          amount: 1
        },
        {
          price: 295,
          quantity: 16,
          amount: 1
        },
        {
          price: 199,
          quantity: 3,
          amount: 1
        }
      ]
    }
  }
})

<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.10.1/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.10.1/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <b-table :items="items" :fields="fields">
    <template #cell(quantity)="{ item }">
    	<b-input v-model="item.amount" min="1" :max="item.quantity" type="number" number></b-input>
    </template>
    <template #cell(total)="{ item }">
    	{{ item.price * (item.amount || 1)}}
    </template>
  </b-table>
</div>

【讨论】：

很好的答案，虽然随着表格变得越来越复杂，我倾向于创建一个行组件。