@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?
  • Вопрос задан
  • 130 просмотров
Пригласить эксперта
Ответы на вопрос 3
bootd
@bootd
Гугли и ты откроешь врата знаний!
запросить эти данные для начала! Как вы их запрашиваете?
Используйте хук created внутрь которого поместите функцию, запрашивающую данные
created () {
this.getData();
},
methods: {
getData () {
//тут делаем запрос по api на получение данных, как только их получили, кладём в свойство rows
}
}
Ответ написан
@vos_50
Читай про 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')) };
}

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

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

Войти через TM ID
Похожие вопросы