Laravel компакт в вю

Question

Я хочу знать, как я могу передать переменные в компонент vue в laravel?

Когда мы работаем с blade-сервером, мы можем передавать переменные, такие как:

$now = Carbon::now();
return view('xxxxxxxx', compact('now');

Таким образом, я могу использовать $now в xxxxxxxx блейд-файле. Но как насчет компонентов VUE? мы обычно возвращаем данные по компонентам с помощью json, а с помощью axios route мы получаем эту информацию, чтобы никоим образом не указать эти данные для точного нашего компонента?

Что если я хочу использовать $now = Carbon::now(); в single.vue компоненте?

Как я могу это сделать?

Обновление

Вот что я хочу сделать с синхронизацией, поскольку углерод не может быть использован (основываясь на комментариях), который я хочу использовать moment.js

Logic

1. Разрешить пользователям делать ставки, если срок выполнения проекта еще не наступил
2. Не разрешать пользователям делать ставки, если срок выполнения проекта наступил

template

<template v-if="`${project.deadline | timeAgo}`">
  pssed (will be replaced by button is just for test)
</template>
<template v-else>
  still have time (will be replaced by button is just for test)
</template>

script

var moment = require('moment');
export default {
        data(){
            return {
                project : '',
            }
        },
        mounted: function() {
            // I found this code by google not sure if is currect!
            Vue.filter('timeAgo', function(value){
                return moment(value) >= fromNow()
            });
        },
}

На основе моего кода выше приведены результаты

Answer 1

Попробуйте это:

Это мои маршруты, просто я просто отображаю представление с некоторыми предопределенными переменными

Route::get('/', function () {
    return view('welcome', [
        'now' => Carbon::now(),
        'deadline' => Carbon::now()->addHours(2)
    ]);
});

И это мой файл представления.Здесь у меня есть пользовательский элемент с именем: example-component.И вот как я передал переменные PHP компоненту Vue, используя props.

И передавал ваши данные в окно следующим образом:

<script>window.data = @json(compact('now', 'deadline'))</script>

И это моеФайл компонента Vue:

<template>
    <h1>
        <span v-if="isPassed">This job is passed</span>
        <span v-else>You have to finish this job</span>
        {{ parsedDeadline | timeFromX(parsedNow) }}
    </h1>
</template>

<script>
const moment = require('moment');

export default {
    props: {
        now: {
            type: String,
            default: () => window.data.now.date // since `now` is an object, you need to access the `date` property to get plain string date that moment can parse
        },
        deadline: {
            type: String,
            default: () => window.data.deadline.date // same as above
        }
    },
    computed: {
        parsedNow () {
            return moment(this.now)
        },
        parsedDeadline () {
            return moment(this.deadline)
        },
        isPassed () {
            return this.parsedNow.isAfter(this.parsedDeadline)
        }
    }
}
</script>

Вот документация о computed и filters.Вы можете НИКОГДА добавить фильтр в функцию mounted, так как это может привести к утечке памяти.Вот как я могу добавить свой фильтр.В вашем app.js (предполагается, что вы используете предустановку Laravel Vue по умолчанию)

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example-component', require('./components/ExampleComponent.vue'));

Vue.filter('timeFromX', (a, b) => a.from(b)); // TADAAA...!!!

const app = new Vue({
    el: '#app'
});

ОБНОВЛЕНИЕ

Если вы хотите попробовать это, вы можете отредактировать routes/web.php и изменить deadline значение:

Route::get('/', function () {
    return view('welcome', [
        'now' => Carbon::now(),
        'deadline' => Carbon::now()->subHours(2), // Passed 2 hours ago
        // 'deadline' => Carbon::now()->addHours(2), // In 2 hours
    ]);
});

Оформить Carbon документы здесь о сложении и вычитании.

ОБНОВЛЕНИЕ II

Если вы получили ошибку вapp.js из приведенного выше кода, возможно, ваш перевозчик не знает о стрелках-паренах.

// Looks like arrow-parens not working, see code below
// Vue.filter('timeFromX', (a, b) => a.from(b)); // TADAAA...!!!

// Change it to this ???
Vue.filter('timeFromX', function (a, b) {
    return a.from(b);
});