Question

I am using MDBootstrap for Vue js, the way to use datatable is to to use prop :data="data" which I calling here tableData and I have columns ready but I need to mutate the rows inside my object,

I couldn't do that with rows:this.data or rows:data which is where I handle getting data from my server.

How can I handle this and mutate rows inside 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
  })

Mutate object to use in MDbootstrap Vue

1 个答案: