No Data Available when retrieving existing API

[kyeljmd]

I have gone through the process of installing vue crud app and I have provided my api.

Here are the specific steps that I did

1. git clone git@github.com:what-crud/vue-crud.git
2. npm install
3. npm run load-template simple-crud

Altered the following files

API.js.

export default { url: 'http://127.0.0.1:8080', path: { prefix: 'api', storage: 'storage', upload: 'files/file-upload', }, }

Crud.vue

`

CRUD confguration

  <v-flex xs12 md6 lg3 px-5>
    <v-switch color="green" label="Export button" v-model="exportButton"></v-switch>
    <v-switch color="green" label="Field filters" v-model="fieldFilters"></v-switch>
    <v-switch color="green" label="Main filter" v-model="mainFilter"></v-switch>
  </v-flex>

  <v-flex xs12 md6 lg3 px-5>
    <v-switch color="green" label="Create mode" v-model="createMode"></v-switch>
    <v-switch color="green" label="Edit mode" v-model="editMode"></v-switch>
    <v-switch color="green" label="Edit button" v-model="editButton"></v-switch>
  </v-flex>

  <v-flex xs12 md6 lg3 px-5>
    <v-switch color="green" label="Select many mode" v-model="selectManyMode"></v-switch>
    <v-switch color="green" label="Update many mode" v-model="updateManyMode"></v-switch>
    <v-switch color="green" label="Remove many mode" v-model="removeManyMode"></v-switch>
  </v-flex>
</v-layout>
<h1 style="text-align:center">CRUD</h1>
<crud
  :prefix="prefix"
  :path="path"
  :page-title="pageTitle"
  :fields-info="fieldsInfo"
  :details-title="detailsTitle"
  :delete-mode="deleteMode"
  :refresh-button="refreshButton"
  :export-button="exportButton"
  :field-filters="fieldFilters"
  :main-filter="mainFilter"
  :create-mode="createMode"
  :edit-mode="editMode"
  :edit-button="editButton"
  :select-many-mode="selectManyMode"
  :update-many-mode="updateManyMode"
  :remove-many-mode="removeManyMode"
>
</crud>
<alert-box></alert-box>

<script> import Crud from '@/utils/crud/components/Crud.vue' import AlertBox from '@/utils/app/components/AlertBox.vue' export default { data () { return { prefix: 'v1', path: 'policy', pageTitle: 'demo.tasks', detailsTitle: '', deleteMode: 'soft', refreshButton: true, exportButton: true, fieldFilters: true, mainFilter: true, createMode: true, editMode: true, editButton: true, selectManyMode: true, updateManyMode: true, removeManyMode: true, } }, created () { this.detailsTitle = this.$t('detailsTitle') }, computed: { fieldsInfo () { return [ { text: this.$t('fields.id'), name: 'id', details: false, }, { type: 'input', column: 'name', text: this.$t('fields.name'), name: 'name', multiedit: false, }, { type: 'textarea', column: 'description', text: this.$t('fields.description'), name: 'description', required: false, }, ] }, }, components: { Crud, AlertBox, }, i18n: { messages: { en: { detailsTitle: 'Task', fields: { id: 'Id', name: 'Name', description: 'Description', }, }, }, }, } </script>

`

On the network it is returning my API with the following response

[{"id":1,"name":"B","description":"X"},{"id":2,"name":"A","description":"A"},{"id":3,"name":"C","description":"Z23"},{"id":4,"name":"Z","description":"Z23"},{"id":5,"name":"X","description":"Z21"},{"id":6,"name":"C","description":"Z23"},{"id":7,"name":"C","description":"Z112"},{"id":8,"name":"C","description":"Zzzx"},{"id":9,"name":"C","description":"Zsada"},{"id":10,"name":"C","description":"Zdsa"}]

However on the page it is returning no data available.

[zhuzhouliang]

Hi, I ran into the same problem like yours. It turns out to be the problem of my model definition. The task should have one important attribute: active, which should be int type and has default value 1. Otherwise no record will be shown.
To your model, it should be something like this:
{"id":1,"name":"B","description":"X", "active":1}