Vue 中的 Laravel 紧凑型

Posted 2023-02-23

【中文标题】Vue 中的 Laravel 紧凑型

【英文标题】：Laravel compact in vue

【发布时间】：2019-02-14 10:02:51

【问题描述】：

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

当我们使用刀片时，我们可以传递如下变量：

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

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

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

我怎样才能做到这一点？

更新

这是我想做的时间，因为碳不能使用（基于 cmets）我想使用moment.js

逻辑

如果项目截止日期未到，让用户投标 如果项目截止日期已到，请勿让用户投标

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()
            );
        ,

根据我上面的代码，这里是结果

【问题讨论】：

你不能使用，即，moment.js 或 DateTime 吗？无论如何，Jeffrey Way 为 Laravel 的 javascript var 包提供了 php vars，我认为您可以使用它并将变量传递给您的组件？或者只是 json 编码和解码 php var 到你的组件中。

@Wreigh 我目前在我的组件中使用moment.js，但很难用它做功能（至少对我来说！）例如，我不想让用户在达到特定时间后执行某些操作（基于数据库）我不知道该怎么做，而碳是小菜一碟：\

啊，那么，你想在 Javascript 中使用 Carbon 对象及其方法吗？我认为这是不可能的。因为您必须序列化整个 PHP 类才能使用它，而且我相信 Carbon 使用 PHP 的 DateTime 类。您想使用哪些示例函数？

您介意展示您的 Vue 组件文件吗？我很乐意提供帮助：D

@krisanalfa 更新了我的问题，兄弟，

【参考方案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 文档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);
);

【讨论】：

您好，感谢您的回答。因为我没有使用刀片（根本）来引用我的组件，所以我使用router-view 我不能使用<example-component now=" $now " deadline=" $deadline "></example-component> 向我的组件添加变量，所以我开始使用moment.js 但在所有情况下它返回 v-if 并且从不返回 v-else 部分。在 cmets 中建议使用 diff ***.com/questions/27326937/… 但我不知道如何使用？关于我的代码。

PS 我按照您的建议将过滤器添加到 app.js我在那里添加了 2 个过滤器）

嗨@mafortis，我已经更新了我的答案。只是一个小小的改动，我把数据传给窗口，让组件使用它。关于您的SyntaxError，我认为这是因为 javascript 转译器问题。我可以看看你的app.js 文件吗？把它放在你的问题上，我会帮你的。

我现在在我的组件中使用filters:，为了避免控制台错误，我将timeAgo: '', 添加到data 现在工作正常，是否也存在任何内存泄漏问题？

不！在您的组件中使用filters 很好！只需避免在挂载时调用Vue.filter，因为每次挂载组件时，您都会发现filter 将被覆盖，它会告诉您的组件进行更改（重新渲染）。但我强烈建议放入全局过滤器（在这种情况下，在您的 app.js 文件中），因为您可以重新使用其他组件的逻辑；）。