Добавить в массив rows (vue.js) данные из базы mysql (php)?

Question

[Dauren S]

<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>

Вопрос: как массив взятый из базы данных(движок на YII2) добавить в rows компонента vue.js?

Answer 1

[Дима Паутов]

запросить эти данные для начала! Как вы их запрашиваете?
Используйте хук created внутрь которого поместите функцию, запрашивающую данные

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

Comments

[Dauren S]

Не подскажете как можно при добавлении новой строки (нажатии add row) узнать введеные значения в поле title?

[Илья Мясин]

Dauren, никак =) При нажатии добавляется не строка, а новый элемент в массив rows. После этого триггерится перерендер и появляется строка.
Введенное значение title будет доступно через this.rows[rowIndex].title - оно связано с инпутом через v-model.
Чтобы сохранить это все, делаете axios.post('/saveData', this.rows)
Если нужно отличать новые от существующих, ну, добавьте id например, и у новых строчек оставляйте его undefined.

Answer 2

[Владислав]

Читай про vue axios.
В твоём случае будет что то типа:
axios.get('тут маршрут').then(response)=>{
this.rows = response.data}
Вроде так) более точно посмотри в доке

Answer 3

[Илья Мясин]

Если я правильно понимаю, тут не SPA со сборкой, а олдскульные пхп-шаблоны, верно?
Тогда можно данные пихать в дата-атрибут примерно так:

<div id="app" data-rows='<?=json_encode($rows)?>'>...</div>

А потом читать их примерно так:

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

Но вообще да, лучше, как писали выше, отдавать апишкой и забирать аксиосом =)