Как передать данные из PHP Laravel в Vue.js и повторно обработать компонент Vue.js при изменении данных? - PullRequest
Новая
       10

Как передать данные из PHP Laravel в Vue.js и повторно обработать компонент Vue.js при изменении данных?

0 голосов
/ 14 февраля 2019

Я все еще немного новичок в Vue.js, так что я, возможно, в корне неправильно понимаю что-то о его реактивности, но в основном я хочу передать некоторые данные из PHP Laravel в компонент Vue.js и имеют компонент Vue.js, который автоматически обновляется при изменении этих данных.

Я видел несколько аналогичных постов на SO, предлагающих использовать props для передачи данных изШаблон Laravel Blade для компонента Vue.js.Вот пример:
Как передать переменную PHP в экземпляр компонента Vue в блейде Laravel?

У меня это работает отлично, но теперь я застрял с тем, как получитькомпонент для обновления, когда данные динамически изменяются после загрузки страницы.

В частности, у меня есть таблица отчетов на определенной веб-странице, и когда пользователь нажимает определенные кнопки и т. д., я использую Ajax для вызоваДействие контроллера Laravel, которое повторно запускает запрос в моей модели Laravel, чтобы получить новые данные для отчета.

У меня есть данные в массиве PHP / JSON, и эти данные должным образом возвращаются клиенту.сторона и у меня есть доступ к нему в JS, но теперь, что мне нужно сделать, чтобы заставить компонент отчета в Vue.js по существу повторно выполнить рендеринг на основе данных, которые я только что получил?Есть ли способ «обновить реквизиты», чтобы Vue.js обнаружил это изменение и автоматически перерисовал весь компонент отчета для меня?

Это то, где я застрял, и после немалых исследованийЯ не могу найти, как это сделать.Спасибо.

1 Ответ

0 голосов
/ 14 февраля 2019

Используете ли вы Ajax вне компонента Vue?или внутри него как метод?

У меня есть пример того, как я динамически обновляю данные Vue из внутри самого компонента.Я не уверен, как сделать так, чтобы внешний JS обновлял компонент Vue напрямую, но мне кажется, что это хороший вариант.Я использую axios вместо Ajax, но принцип тот же (Axios по умолчанию включен в большинство установок Laravel после 5.5). 

<template>
    <div>
        <div id="reports">
            <!-- Display data -->
            {{ reports }}
        </div>
        <button @click="refreshReports">Refresh</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                endpoint: '/api/MY_ROUTE/'
            };
        },

        props: {
            reports: Object
        },

        methods: {
            // Make Axios call to API endpoint
            refreshReports() {
                // GET version
                axios.get(this.endpoint)
                    .then(({data}) => {
                        this.reports = data.data;
                    });

                // POST version
                axios.post(this.endpoint, {
                    KEY: 'VALUE',
                }).then(({data}) => {
                    this.reports = data.data;
                });

                /*
                    `data.data` assumes the returned response is a JSON Resource

                    if it's not returning the correct data, put a `console.log(data)` and see how it's getting returned!
                 */
            }
        }
    };
</script>

Где в вашем routes/api.php файл, у вас есть маршрут, подобный следующему: 

// GET version
Route::get('MY_ROUTE', 'ReportController@getReports');

// POST version
Route::post('MY_ROUTE', 'ReportController@getReports');

И ваш контроллер будет иметь такой метод: 

// app/Http/Controllers/ReportController
public function getReports(Request $request) {
    return Reports::all();
}

Имеет ли это смысл?

Обновление:

Я не уверен, как внешний JS может напрямую обновлять компонент Vue

Я знаю, что вы можете импортировать внешние JS-скрипты и использовать их функции в методахно я никогда раньше так не делал.

Что-то вроде: 

<script>
import { myFunction } from '../external.js'

export default {
    methods: {
        refreshReports() {
            // I have no idea if this is the correct way to do it, just a guess!
            this.reports = myFunction();
        }
    }
};
</script>
...