Shopping Cart with VueJS

Yeah, it can be done.

Try learning about Vue then thinking about how to do achieve what you want to achieve.

Wow @topvillas, thank you you saved my day !!!!

Well, what do you want to know?

Put an empty array of items in your VM's data property then call a method that pushes an item into the array when a user clicks an add item button. Then use a computed property to calculate the total.

You could learn how to do it in 15 minutes by just reading the Vue docs. Vue is easy, just muck about with it.

Sorry if I came across as an arsehole but really, you've got nothing to lose by just playing about with Vue. It's not React where you spend a week writing code then another week looking at useless answers on EgoOverflow wondering why it doesn't work.

Hi @kossa

A good starting point is https://laracasts.com/series/learn-vue-2-step-by-step

If you speak french, there is also a good source here to learn about Vue with Video: https://www.grafikart.fr/formations/vuejs

Happy learning :)

Thank you @mdecooman for links @topvillas I already have read the documentation and I have seen https://laracasts.com/series/learn-vue-2-step-by-step

I know how to create a component, and fetch the data from an API using jQuery or Axios, but the shopping-cart is already done with Laravel/Blade. I know how to make to calculate the total using jquery, will take less then 15min, but I want to do it with VueJs, my problem is how to populate the products from blade directly(mean from the rendred view) without Ajax(may be the only solution ^^) only manipulating dom

Hope I was clear now ;)

You could get Blade to spew out a json with your items into the page and reference that from your VM. But my advice is to just use AJAX. I mean, why not?

Just want to try something else, manipulating DOM

Thank you @topvillas :)

Check also this repo: https://github.com/matheusazzi/shop-vue

Demo: http://matheusazzi.com/shopping-cart/

You can simply just use computed property of a vue

lineTotal() {

    return this.qty * this.price;
}

hopefully, it works.

Ideally, you should do an Axios request to update the cart too. So before doing that better call an axios.post('cart/update').then(result){});

I hope you get my point. @kossa