Add data from mysql database (php) to rows array (vue.js)?

Question

PHP

<div id="app">
    <table class="table">
        <thead>
            <tr>
                <td><strong>Title</strong></td>
                <td><strong>Description</strong></td>
                <td><strong>File</strong></td>
                <td></td>
            </tr>
        </thead>
        <tbody>
        	
            <tr v-for="row in rows">
                <td><input type="text" v-model="row.title"></td>
                <td><input type="text" v-model="row.description"></td>
                <td><input type="file" @change="setFilename($event);"></td>
                <td><a v-on:click="removeElement(row);" style="cursor: pointer">Remove</a></td>
            </tr>
        </tbody>
    </table>
    <div>
        <button class="button btn-primary" @click="addRow">Add row</button>
    </div>
</div>

<script type="text/javascript">

    var app = new Vue({
        el: "#app",
        data: {
            rows: [
                
                { title: "XEngine for Sale", description: "An application" },
                { title: "There is no place like 127.0.0.1", description: "Best tool for your security." }
            ]
        },
        methods: {
            addRow: function () {
                this.rows.push({ title: "", description: "" });
            },
            removeElement: function (row) {
                var index = this.rows.indexOf(row);
                this.rows.splice(index, 1);
            },
            setFilename: function (event) {
                this.filename = event.target.name;
            }
        }
    });

</script>

Question: how to add an array taken from the database (engine on YII2) to the rows of the vue.js component?

Answer 1

request this data to get started! How do you request them?
Use the created hook inside which put a function that requests data

created () {
this.getData();
},
methods: {
getData () {
//тут делаем запрос по api на получение данных, как только их получили, кладём в свойство rows
}
}

Answer 2

Read about vue axios.
In your case, it will be something like:
axios.get('there is a route').then(response)=>{
this.rows = response.data}
It seems so) look more precisely in the dock

Answer 3

If I understand correctly, this is not a SPA with an assembly, but old-school php templates, right?
Then you can shove the data into the data attribute like this:
And then read them like this:

data() {
   return { rows: JSON.parse(this.$el.getAttribute('data-rows')) };
}

But in general, yes, it’s better, as they wrote above, to give it with an apish and take it with an axios =)