jet
85
4
Vue

data not displaying on the browser

Posted 2 months 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.

Reply to

Use Markdown with GitHub-flavored code blocks.