I'm trying to use Blade in my Vue file carousel-signUp.vue
Like:
<template>
<div>
<form action="{{route('dump')}}" method="POST" >
/* Some code here...*/
</form>
</div>
</template>
But in the end I'm getting an error.
The compiler can't understand the difference between Vue syntax and Blade syntax. How can I define Blade syntax in Vue files?
Or, does anyone have an idea how to use {{route('dump')}}
value in my vue
file?
A better solution might be to output the desired blade variables to (hidden) html and select that html in your Vue code. Escape the curly braces for Vue with @
.
<div id="content" hidden>
{{ bladeVar }}
</div>
<div id="app">
@{{ vueVar }}
</div>
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>
I found a post having the same issue as you
You can't use blade in your Vue files, but you can use Vue slots so you can send the content from your blade file to the component:
Vue file
<template>
<div>
<slot></slot>
</div>
</template>
Blade
<carousel-sign-up>
<form action="{{route('dump')}}" method="POST" >
/* Some code here...*/
</form>
</carousel-sign-up>
This will be useful when your components should have dynamic content. If in that component you only will need that route from blade and the form will be ever the same, look at @Mick answer.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With