Question

我试图在我的Vue文件carousel-signUp.vue

中使用Blade

像：

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

但最终我收到了错误。

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

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

Answer 1

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

您的刀片 example.blade.php

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

我找到了a post having the same issue as you

Answer 2

你可以通过＆＃34; {{route（＆＃39; dump＆＃39;）}}＆＃34;作为组件的支柱。

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

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

米克

Answer 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的答案。

Answer 4

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

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

这样，如果您有 VueJs 的经验，您可以在 Vue 中将其捕获为“数据”。

如何在Vue文件中使用Blade？

4 个答案:

您的刀片 example.blade.php

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