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://v2.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.
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 ...
Related
I have a page with a list of blog posts.
What would be the best way to open the post content on the same page in a modal, without redirecting to the single post page?
What I thought it's to make it in vanilla JS, to have an event on each post, have the data for all the posts in some array or each inside an attribute and when the event is triggered, fill the data for that post in the modal and show it. Maybe I can use AlpineJS for this.
Seems rudimentary to have it in vanilla, is there a better way to do it?
I also thought about Livewire, but I'm afraid it will be slow, have looked on some videos on YT, and when the button was clicked, it was visible when the data was filling in, looked slow.
Have thought also to make API calls, but I'd have to make the authentication work on that specific route, which would complicate it too much I guess, since it's going to be used just for this page.
What are your thoughts, how would you do it?
All your suggestions would work. Just depends on what you prefer and are able to implement. Also, think around opening the Post content in a modal, how much data do you want to load in the modal? Such questions will assist in you deciding the best way to design the post page.
Hi I come from bootstrap and Im trying to learn some vuetify. I had some questions about the framework that I couldnt find the answer to in the vuetify docs.
What is a prop? (1)
What is the difference between adding a prop and adding it as a class attr? (2)
Is there a list where I can find all the props and helper classes for the components? (3)
For example: I was trying to make a container take the full width of the screen and couldnt find any property that the vuetify docs indicated that would make my container act like, this so I had to look online. I finally read on a stack overflow post that there was a prop called full-height that did exactly what I wanted. The problem was the conatiner docs said nothing about this prop in relation to the container itself. I also looked around the customization and the styles and animations tabs on the docs and could find anything about it. Where are all these props and helper classes defined?
Vuetify uses Vue.js components, so you should be familiar with them.
However, I'll try to answer your 3 questions:
Props are a way to pass data to components. Say, for example, you are building a header component which needs to get the title from the page in which you put it in. Then, you can just declare a title property and then use that inside the component. You can then pass it like your standard HTML attributes, e.g. <the-title title="Main Page" /> If the component is called TheTitle. For more thorough information, There is a whole page about props inside the official Vue.js docs.
In your use case, a class is useful when you have the appropriate CSS styling for it, otherwise it wouldn't do anything. My suggestion would be to use props for styling individual components where you don't have the same style anywhere else and classes for cases where a style repeats itself. If the style is local to the component, make sure you add scoped to the style tag to avoid applying it anywhere else.
Vuetify has a nice API explorer which you can use to browse the entire collection of components. Each one has an API section where you can see all the details, including information about the props and other stuff.
I guess this question has already been posted in different forms over time, but I still didn't find the answer I'm looking for:
I'm having trouble implementing vueJS in my Laravel app, I want to keep server and front-end very much separated but in this case it doesn't seem so easy. I have the classic blog project, where every article has some tags associated with it, so there's a classic many-to-many relationship and everything is set.
When I edit an article, I wanna have a section where all the tags are displayed and also you can add a new tag (very stackoverflow-like), what I wanna achieve is that my Javascript (and so my vue) only manages the rendering of those tags on the page, so that when I enter in the edit page I can see all associated tags, BUT, i only want to edit the input tag inside my form, I don't want to do a POST request in Vue, I want to keep it PHP, I want laravel validation, I don't want to write another one for the javascript.
I want javascript to only edit the DOM when I want to add a tag, so that I insert a new one and it immediately gets pushed inside the already existing array of tags, so in real-time the tags are updated, but when I submit the form it is my PHP that handles the server request, not vue, and this for now seems impossible because in order to update the tags correctly when adding one (or removing one), the data inside vue needs to have a list of tags, otherwise it won't work.
This means I have to create a new route (for example /tags/{article_id}) and a new controller function in order to return tags associated with that article, so this also means that I can't give to PHP the tags that I rendered (cause for example they're in a list, not an input select (due to the appearence I want to give)) isn't there a cleaner way to do this?
I'm trying to wrap my head around vuejs but sometimes it feels like stuff would be easier in jQuery (?), I don't know... I hope I explained myself correctly.
I research about validate form.
I understand Ember does not know how to work with attributes validation HTML5(required, pattern ). For this need created functions with algorithm validation in model for each form. And run that function when click submit button
I have a question: I have possibility show standard HTML5 error message for not valid input?
For example: I check all fields(in Ember model) and one field not valid. We need for this field show notice that field is not valid at help HTML5(maybe run for this element valid() function) How do that?
Have a look at this project ember-easyForm and this introductory blog post.
It makes creating forms in ember a lot easier, and it also includes validation.
Hope it helps.
i've been posting alot questions lately on stackoverflow due to my issues i'm facing recently and you guyz have realy helped me alot.
MY Question:
I'm working on backbone.js and i've worked on codeignitor on my project. Now my question is in ci, i can load views directly from ci view and can display dynamic html easily ( working fine for me). problem is i've to shift my js code and functions and ajax calls to backbone.js and i'm pretty much at the start of this project. i'm not clear on how can i show entirely new page html on some events in backbone.
my question Not clear? let me explain further.
Explanation:
i mean i've some an index page and all of things load in this page ( sliders , footers etc etc ). whenever any item is clicked to see the details, ci calls the appropriate methods and gives me the html which displays that product in an entirely new page ( without loading ) with only image of that product and some other options for the product. it's pretty easy with ci, but how can i do this with backbone.js to show up different pages or entirely different html from index page and not showing other stuff of index page.
i can work out how to move and design the logic behind it but i'm not getting the picture of how can i load these different html for different events ( like about button should show about us page, featured category should show featured products all in that main index file.)
I'm really desperate to get some directions.
thnx guyz
I think you were meant to say you want to make single page application.
Yes, backbone best idea to do so. You will required following :
template ( should be inside <script type="text/template"> and </script>)
backbone view
backbone model
backbone router