如何在 Vue 文件中使用 Blade？答案

【问题标题】：How can I use Blade in Vue files?如何在 Vue 文件中使用 Blade？
【发布时间】：2017-12-23 03:10:00
【问题描述】：

我正在尝试在我的 Vue 文件中使用 Blade carousel-signUp.vue

喜欢：

<template>
    <div>           
        <form action="{{route('dump')}}" method="POST" >
           /* Some code here...*/
        </form>
   </div>
</template>

但最后我得到了一个错误。

编译器无法理解 Vue 语法和 Blade 语法的区别。如何在 Vue 文件中定义 Blade 语法？

或者，有人知道如何在我的vue 文件中使用{{route('dump')}} 值吗？

【问题讨论】：

刀片不能在vue文件中使用。
对在我的 vue 文件中使用 {{route('dump')}} 值有任何想法吗？ :(

标签： javascript laravel vue.js blade vue-component

【解决方案1】：

您可以将“{{route('dump')}}”作为道具传递给组件。

<component route="/yourRouteHere"> </component>

https://vuejs.org/v2/guide/components.html#Props

米克

【讨论】：

【解决方案2】：

更好的解决方案可能是将所需的刀片变量输出到（隐藏的）html 并在您的 Vue 代码中选择该 html。使用 @ 转义 Vue 的花括号。

你的刀片 example.blade.php

<div id="content" hidden>
    {{ bladeVar }}
</div>

<div id="app">
    @{{ vueVar }}
</div>

该刀片的结果（它在缓存文件中的外观）+ javascript (Vue)

var app = new Vue({
    el: '#app',
    data: {
        vueVar: document.getElementById('content').innerHTML + 'from Vue'
    }
});

<script src="https://unpkg.com/vue"></script>
<div id="content" hidden>
    Hello world
</div>

<div id="app">
    {{ vueVar }}
</div>

我找到a post having the same issue as you

【讨论】：

【解决方案3】：

你不能在你的 Vue 文件中使用刀片，但你可以使用 Vue 插槽，这样你就可以将刀片文件中的内容发送到组件：

Vue 文件

<template>
    <div>           
        <slot></slot>
    </div>
</template>

刀片

<carousel-sign-up>
    <form action="{{route('dump')}}" method="POST" >
        /* Some code here...*/
    </form>
</carousel-sign-up>

当您的组件应该具有动态内容时，这将很有用。如果在该组件中，您只需要刀片中的该路由并且表单将永远相同，请查看@Mick 答案。

【讨论】：

【解决方案4】：

您可以将数据解析为 Json，然后您可以将刀片重定向到 vue Companent。我会在下面提到它。

<your-companent data={{$yourDataFromBackEnd}}></your-companent>

像这样，如果你有 VueJs 的经验，你可以在 Vue 中捕获“数据”。

【讨论】：