Vue 中的 Laravel 緊湊型

Question

我想知道如何將變量傳遞給 laravel 中的 vue 組件？

當我們使用刀片時，我們可以傳遞如下變量：

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

這樣我就可以在xxxxxxxx刀片文件中使用$now了。 但是 vue 組件呢？ 我們通常通過 json 為組件返回數據，並且使用 axios 路由我們得到該信息無法為我們的確切組件指定此類數據？

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

我怎樣才能做到這一點？

更新

這是我想對時間做的事情，因為碳不能使用（基於評論）我想使用moment.js

邏輯

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的自定義元素。 這就是我使用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文檔。

更新二

如果您在上面的代碼中的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);
});