SwissNight's avatar

How do I load data from PHP into the properties of a Vue component?

Beginner with Vue here - loved the Vue laracasts! I have the following code, with rowsfromdatabase containing a proper JSON object, which I can see when I call my component and show {{ rowsfromdatabase }}.

<template>
  <div>
    {{ rowsfromdatabase }}
    <table
      title="Demo Table"
      :columns="columns"
      :rows="rows"/>
  </div>
</template>

<script>
export default {
  name: 'test',
  props:['rowsfromdatabase'],
  data(){
    return {
      columns: [
        {
          label: 'Name',
          field: 'name',
        },
        {
          label: 'Age',
          field: 'age',
          type: 'number',
          html: false,
        },
        {
          label: 'Created On',
          field: 'createdAt',
          type: 'date',
          inputFormat: 'YYYYMMDD',
          outputFormat: 'MMM Do YY',
        },
        {
          label: 'Percent',
          field: 'score',
          type: 'percentage',
          html: false,
        },
      ],
      rows: [
        {id:1, name:"John",age:20,createdAt: '2010-10-31',score: 0.03943},
        {id:2, name:"Jane",age:24,createdAt: '2011-10-31',score: 0.03343},
        {id:3, name:"Susan",age:16,createdAt: '2011-10-30',score: 0.03343},
        {id:4, name:"Chris",age:55,createdAt: '2011-10-11',score: 0.03343},
        {id:5, name:"Dan",age:40,createdAt: '2011-10-21',score: 0.03343},
        {id:6, name:"John",age:20,createdAt: '2011-10-31',score: 0.03343},
        {id:7, name:"Jane",age:24,createdAt: '20111031'},
        {id:8, name:"Susan",age:16,createdAt: '2013-10-31',score: 0.03343},
        {id:9, name:"Chris",age:55,createdAt: '2012-10-31',score: 0.03343},
        {id:10, name:"Dan",age:40,createdAt: '2011-10-31',score: 0.03343},
        {id:11, name:"John",age:20,createdAt: '2011-10-31',score: 0.03343},
        {id:12, name:"Jane",age:24,createdAt: '2011-07-31',score: 0.03343},
        {id:13, name:"Susan",age:16,createdAt: '2017-02-28',score: 0.03343},
        {id:14, name:"Chris",age:55,createdAt: '',score: 0.03343},
        {id:15, name:"Dan",age:40,createdAt: '2011-10-31',score: 0.03343},
        {id:19, name:"Chris",age:55,createdAt: '2011-10-31',score: 0.03343},
        {id:20, name:"Dan",age:40,createdAt: '2011-10-31',score: 0.03343},
      ],
    };
  },
};
</script>

I would like to write :rows="rowsfromdatabase" instead of :rows="rows" and then I would be set. How do I do that?

0 likes
3 replies
edoc's avatar
edoc
Best Answer
Level 24

Actually this works doesn't it?

:rows="rowsfromdatabase"

SwissNight's avatar

In my understanding it should, so I must be doing something else wrong (maybe due to not understanding the library I'm using). When doing it I get the following error:

app.js:33192 TypeError: computedRows.sort is not a function
    at VueComponent.processedRows (app.js:43522)
    at Watcher.get (app.js:35507)
    at Watcher.evaluate (app.js:35614)
    at VueComponent.computedGetter [as processedRows] (app.js:35891)
    at VueComponent.paginated (app.js:43554)
    at Watcher.get (app.js:35507)
    at Watcher.evaluate (app.js:35614)
    at VueComponent.computedGetter [as paginated] (app.js:35891)
    at Object.get (app.js:34303)
    at Proxy.render (app.js:45161)

I'll dig in the library to try to understand it better.

SwissNight's avatar

Update: it works, I just needed to manage the quotes (") in my data.

Please or to participate in this conversation.