Please tell me in this question with Vue.
There are posts with categories. There is a dynamic menu, by clicking on which, posts from this category with a paginator would be displayed. How, when you click on a menu item, transfer the data set of the selected category to the post-component so that it displays it.

v-on: click = "getcat (cat_id)" in the menu receives data, but how to display it in the post-component?

With vue only began to understand, it is quite possible that I took the absolutely wrong path.

welcome.blade.php

<div class="col-md-3"> @if($menu) @foreach ($menu as $mm) @include('mitems', ['item'=>$mm]) @endforeach @endif </div> <div class="col-md-9"> <post-component></post-component> </div>

post-component.vue

 <template> <div> <div v-for="post in laravelData.data"> //информация </div> <pagination :limit="5" :data="laravelData" @pagination-change-page="getResults"></pagination> </div> </template> <script> export default { data() { return { laravelData: {}, } }, created() { this.getResults(); }, methods: { getResults(page) { if (typeof page === 'undefined') { page = 1; } this.$http.get('/post?page=' + page) .then(response => { return response.json(); }).then(data => { this.laravelData = data; }); }, } } </script>

app.js

 const app = new Vue({ el: '#root', methods : { getcat: function (key) { this.$http.get('/post?cat_id=' + key) .then(response => { return response.json(); }).then(data => { this.laravelData = data; }); }, } });
  • In the official documentation vue.js everything is detailed and even in Russian is painted. I advise you to read fluently so that in your head at least the thought of something that I have already seen it is deposited. - adrug
  • Link here - adrug
  • From your example it is absolutely incomprehensible how the menu looks and in which component it is. In any case, vue is purely spa, and server rendering will not lead to anything good. And the data in the component is transmitted through props or immediately vuex. - Artem Gorlachev
  • @ArtemGorlachev please specify why vue is a pure spa and where did you see ssr? - Ilya Zelenko
  • @IlyaZelenko - hmm, welcome.blade.php , @if , not ssr? And I took what I tried to run it on a large ssr project, and it did not end in success. But if you have examples of implementation, I will be glad to see - Artem Gorlachev

1 answer 1

The problem is that you are using a blade, and not purely vue components in the frontend, this is not as convenient as it is for me and limits you, it seems like even a live reload will not work, you need to reload the page itself. The welcome.blade.php page could be a component of vue, and that in general all pages are components of vue that work through a vue router, and laravel would be good purely as an API from which you can get data and vue worked with them. If you had laravel as an API, then in the Welcome.vue component (the page instead of welcome.blade.php) you could get the menu from the laravel backend and nicely output it through v-for, which would display the menu components, like this :

 <menu-item v-for="(item, index) in mitems" key="'menu-' + index" @menuClick="showCategory" />

I specified a custom menuClick event that is created inside the component itself via $ emit and goes outside where the parent component (in the template of which the menu-item is placed, that is, Welcome.vue) catches it via @menuClick , you can pass category information to this event . showCategory is an event handler that is contained in the methods of the Welcome.vue component, which can get categories and do what they need with them.

You can learn more about the components here .

I hope I clarified your picture and you understood in which direction to move.

update : for some reason, the example code did not show up at the beginning))