jet
17
4
Vue

data not displaying on the browser

Posted 1 week ago by jet

pls help me am having this that shows that everything is working but when i get data from the API it does not show on the browser it indicates on the console that i have received data and it comes with this error message Invalid prop: type check failed for prop "gridData". Expected Object, got Array index.vue

<template>
  <section>
      <AdsListComponent v-bind:gridData="gridData" />
  </section>
</template>

<script>
import AdsListComponent from '~/components/AdsListComponent.vue'

export default {
  components: {
    AdsListComponent
  },

  data() {
    return {  gridData:[] }
  },

    created: function() { 
      this.fetchSomething()
       },

        methods: {
      
          async fetchSomething() {
            const data = await this.$axios.$get('/api/ads')
            console.log(data)
            this.gridData = data.gridData 
          },
  }
}
</script>

<style>
table {
  border: 2px solid #42b983;
  border-radius: 3px;
  background-color: #fff;
}

th {
  background-color: #42b983;
  color: rgba(255, 255, 255, 0.66);
}

td {
  background-color: #f9f9f9;
}

th,
td {
  min-width: 120px;
  padding: 10px 20px;
}
</style>

adslistcomponent

<template>
<div>
  <h2>Ads List</h2>
  <p> {{gridData}}</p>
  <table>
    <thead>
      <tr>
        <th>Title</th>
        <th>Description</th>
        <th>Category</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="data in gridData" :key="data.id">
        <td>{{ data.title }}</td>
        <td>{{ data.description }}</td>
        <td>{{ data.category }}</td>
        <td>
          <button @click="editwork(data.id)" class="btn btn-sm btn-warning">Edit</button>
          <button @click="deletework(data.id)" class="btn btn-sm btn-danger">Delete</button>
        </td>
      </tr>
    </tbody>
  </table>

</div>
</template>


<script>
export default {
  
  props: { gridData: { type: Object,
      
      default: function () {
        return {name: '', description: '' }
            }
          }
        },

  methods: {
    editwork: function () {
      console.log('edited')
    },

    deletework: function () {
      console.log('deleted')
    }
  }
}
</script>

don't know what to do

Please sign in or create an account to participate in this conversation.

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up

Channels

Reply to

Use Markdown with GitHub-flavored code blocks.