@dauren101
C++, Java, Python, PHP developer

Добавить в массив rows (vue.js) данные из базы mysql (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>

Вопрос: как массив взятый из базы данных(движок на YII2) добавить в rows компонента vue.js?
  • Вопрос задан
  • 244 просмотра
Пригласить эксперта
Ответы на вопрос 3
bootd
@bootd
Гугли и ты откроешь врата знаний!
запросить эти данные для начала! Как вы их запрашиваете?
Используйте хук created внутрь которого поместите функцию, запрашивающую данные
created () {
this.getData();
},
methods: {
getData () {
//тут делаем запрос по api на получение данных, как только их получили, кладём в свойство rows
}
}
Ответ написан
Читай про vue axios.
В твоём случае будет что то типа:
axios.get('тут маршрут').then(response)=>{
this.rows = response.data}
Вроде так) более точно посмотри в доке
Ответ написан
dubr
@dubr
пыхарь
Если я правильно понимаю, тут не SPA со сборкой, а олдскульные пхп-шаблоны, верно?
Тогда можно данные пихать в дата-атрибут примерно так:
<div id="app" data-rows='<?=json_encode($rows)?>'>...</div>

А потом читать их примерно так:
data() {
   return { rows: JSON.parse(this.$el.getAttribute('data-rows')) };
}

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Страховой Кабинет Нижний Новгород
от 60 000 до 90 000 руб.
MXP
от 120 000 до 140 000 руб.
AwardWallet Пермь
от 40 000 до 100 000 руб.
27 июн. 2019, в 13:32
6000 руб./за проект
27 июн. 2019, в 13:25
3000 руб./за проект
27 июн. 2019, в 13:01
3000 руб./за проект