php - 表Vue组件上没有返回任何数据(There are no data returning on the table Vue component)

Question

I am new to Laravel and Vue.js.

(我是Laravel和Vue.js的新手。)

I need to display the data on a Vue component.

(我需要在Vue组件上显示数据。)

The tableData variable in axios.get response is not empty and returning an array.

(axios.get响应中的tableData变量不为空，并返回一个数组。)

But it is not displaying on the table.

(但是它没有显示在桌子上。)

Is there something wrong with my code?

(我的代码有问题吗？)

I am following a tutorial on Medium.

(我正在关注有关Medium的教程。)

<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>

  ask by ghost translate from so

Answer 1

等待大神答复