“Manipulate” Laravel Blade Form with Vue.JS

Question

I could use some help to understand the fundamentals between Blade views and the use of Vue.JS in combination.

I have a form which is created by a Blade Template.

I now want to help the user filling out the form by pre-filling the "End-Date" depending on which duration he chooses in the dropdown. Also, if he chooses "no duration", the End-Date should be hidden and so on.

Now i don't have experience with JavaScript. It should be possible to do things like this with JQuery but as far as i understand, Laravel and Vue.JS seem to be a good combination. So i wanted to go with it.

I don't understand how to combine Blade with Vue.

Can i just add things like <p>@{{ message }}</p> into the template? I tried this, but where has the JavasScript-Code to go? Putting it in the app.js gives me a warning:

[Vue warn]: Property or method "message" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

I've been reading of Vue-Components, but putting the whole form or parts of it into a component would Blade prevent to render the form, correct?

Maybe you could help me into the right direction. Thanks alot.

Answer 1

First Of all you need to know the basics of JavaScript. Although you had jumped to js framework that will not help you. Learn js first. If you only want to maintain the End-date by the duration , it can be done by basic js or jquery. You don't need to adjust vuejs. Rather if you being compelled to vuejs , it can be done on a component and can be rendered by catching an id of any div tag ...