Vue 中的 Laravel 紧凑型

Question

我想知道如何将变量传递给 laravel 中的 vue 组件？

当我们使用 blade 时，我们可以传递如下变量:

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

这样我就可以在xxxxxxxx Blade 文件中使用$now。但是 vue 组件呢？我们通常通过 json 为组件返回数据，并通过 axios 路由获取该信息，无法为我们的确切组件指定此类数据？

如果我想在 single.vue 组件中使用 $now = Carbon::now(); 怎么办？

我怎样才能做到这一点？

更新

这是我想用计时做的事情，因为不能使用碳(基于评论)我想使用 moment.js

逻辑

1. 如果项目截止日期尚未到来，让用户出价
2. 如果项目截止日期到了，不要让用户出价

模板

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

脚本

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

试试这个:

这是我的路线，我只是用一些预定义的变量渲染一个 View

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

这是我的 View 文件。这里我有一个名为:example-component 的自定义元素。这就是我使用 props 将 PHP 变量传递给 Vue 组件的方式.

然后像这样将你的数据传递给窗口:

<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 文档 here关于加法和减法。

更新二

如果你在 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);
});