Laravel 控制器将值作为 Vue 道具传递

Posted 2023-02-23

【中文标题】Laravel 控制器将值作为 Vue 道具传递

【英文标题】：Laravel controller passing value as Vue prop

【发布时间】：2019-12-31 22:37:17

【问题描述】：

我目前有一个 Laravel 路由通向我的控制器的 index 函数，并带有传递的 ID，我在视图中返回 id

public function index($id)

    return view('progress')
        ->with('identifier', $id);

在所述视图中加载的组件中，我正在尝试访问 identifier 作为我的 vue 脚本中的道具

props: ['identifier'],
    methods: 
        getInformation() 
            this.$root.$emit('fetchEvent');
        ,
    ,
    mounted () 
        console.dir(this.identifier);
    

但是，我的控制台显示未定义，我不知道如何将传递的 identifier 作为道具。

我做错了什么？

更新：

完整的模板代码

<template>
    <div>
        <div class="tab-content">                
                <item-component 
                    :web-identifier="identifier"
                ></item-component>
        </div>
    </div>

</template>


<script>
export default 
   props: ['identifier'],
    methods: 
        getInformation() 
            this.$root.$emit('fetchEvent');
        ,
    ,
    mounted () 
        console.dir(this.identifier);
    

</script>

刀片：

<div>
<task-detail-component></task-detail-component>
</div>

【问题讨论】：

如何在进度模板中传递道具

代码的底部是我的进度模板。我想这是我不确定的，我正在尝试通过 props 使标识符在模板中可访问

请分享进度模板代码

@BoussadjraBrahim 没有其他东西，但我分享了它

您在刀片模板中调用该组件的位置和方式

【参考方案1】：

在刀片模板中按如下方式传递该数据：

<div>
<task-detail-component :identifier="$identifier"></task-detail-component>
</div>

【讨论】：

好的，我的控制台部分显示未定义是有原因的吗？

或尝试<task-detail-component :identifier="$identifier"></task-detail-component> 和$identifier

在构建时出现意外令牌的编译错误

是的。刀片视图注入变量对浏览器不可用，除非您以这种方式显式绑定它们。

我现在明白了，我相信了。谢谢！

【参考方案2】：

在您需要传递identifier 的模板中，它将是这样的

<div>
<task-detail-component :identifier="$identifier"></task-detail-component>
</div>

【讨论】：

好的，我明白了，为什么控制台打印未定义，我试图在控制台中显示它？

您确定将identifier 变量传递给包含此组件的视图吗？

你可以看到我在哪里将它传递给我上面的控制器中的视图

尝试将其作为 api 并使用 axios 从 ajax 获取它到您的组件中