Нет данных, возвращаемых на компонент таблицы Vue - PullRequest
0 голосов
/ 01 декабря 2019

Я новичок в Laravel и Vue.js. Мне нужно отобразить данные на компонент Vue. Переменная tableData в ответе axios.get не пуста и возвращает массив. Но это не отображается на столе. Что-то не так с моим кодом? Я следую учебному пособию по среде.

<div class="card-body">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">Display Name</th>
        <th scope="col">Description</th>
        <th scope="col">Created At</th>
      </tr>
    </thead>
    <tbody>
        <tr class="" v-if="tableData.length === 0">
          <td class="lead text-center" :colspan="columns.length + 1">No data found.</td>
        </tr>
        <tr v-for="(data, key1) in tableData" :key="data.id" class="m-datatable__row" v-else>
          <td>{{ serialNumber(key1) }}</td>
          <td v-for="(value, key) in data">{{ value }}</td>
        </tr>  
    </tbody>
  </table>
</div>
<script>
export default {
  props: {
    fetchUrl: { type: String, required: true },
    columns: { type: Array, required: true },
  },
  data() {
    return {
      tableData: []
    }
  },
  created() {
    console.log(this.fetchUrl);
    return this.fetchData(this.fetchUrl)
  },
  methods: {
    fetchData(url) {
      axios.get(url)
        .then(response => {
          console.log(response.data.data)
          this.tableData = response.data.data
          console.log(this.tableData)
      })
    },

    /**
    * Get the serial number.
    * @param key
    * */
    serialNumber(key) {
      return key + 1;
    },
  },
  filters: {
    columnHead(value) {
      return value.split('_').join(' ').toUpperCase()
    }
  },
  name: 'Read'
}
</script>

<style scoped>

</style>

КОНТРОЛЛЕР

public function getRoleForDataTable(Request $request)
{
    $roles = Role::all();
    return RoleResource::collection($roles);
}

RoleResource.php

public function toArray($request)
{
    return [
        'name'       => $this->name,
        'description'      => $this->description,
        'created_at' => Carbon::parse($this->created_at)->toDayDateTimeString(),
    ];
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...