vue.js - 变异对象以在 MDbootstrap Vue 中使用

Question

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

我无法使用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>

Answer 1

您应该将值分配给tableData.rows可用时。

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