变异对象以在 MDbootstrap Vue 中使用答案

【问题标题】：Mutate object to use in MDbootstrap Vue变异对象以在 MDbootstrap Vue 中使用
【发布时间】：2019-08-10 03:46:48
【问题描述】：

我正在为 Vue js 使用 MDBootstrap，使用数据表的方法是使用 prop :data="data" 我在这里调用 tableData 并且我已经准备好列但我需要改变我的对象中的行，

我无法使用rows:this.data 或rows:data 来处理从我的服务器获取数据的位置。

如何处理这个问题并改变 tableData 中的行？

<template>
  <div class="container-fluid">
    <ProgressSpinner v-if="isLoading"/>

    <mdb-datatable :data="tableData" striped bordered/>
  </div>
</template>
<script>
import ProgressSpinner from './Preloader'
import DataTable from 'vue-materialize-datatable'
import { mdbDatatable } from 'mdbvue'

export default {
  name: 'Companies',
  data: () => ({
    data: [],
    tableData: {
      columns: [
        { label: 'ID', field: 'id', sort: 'asc' },
        { label: 'Name', field: 'name' },
        { label: 'Phone', field: 'phone', sort: 'asc' },
        { label: 'Email', field: 'email', sort: 'asc' },
        { label: 'City', field: 'city', sort: 'asc' },
        { label: 'Join Date', field: 'joined_at' }
      ],
      rows: []
    },
  }),
  created() {
    this.$store
      .dispatch('allCompanies')
      .then(() => {
        this.data = this.$store.getters.getAllCompanies
      })
      .catch(() => {
        this.customerErrors = this.$store.getters.customerError
      })
  },
  computed: {
    isLoading() {
      return this.$store.getters.customersAreLoading
    },
  },
  components: {
    ProgressSpinner,
    datatable: DataTable,
    mdbDatatable
  },
  mounted() {
    $('.container-fluid').bootstrapMaterialDesign()
  }
}
</script>

【问题讨论】：

标签： vue.js mdbootstrap

【解决方案1】：

您应该将值分配给tableData.rows（如果可用）。

this.$store
  .dispatch('allCompanies')
  .then(() => {
    this.tableData.rows = this.$store.getters.getAllCompanies
  })

【讨论】：