Code: Select all
//discussions.blade.php
@foreach($dto->discussions as $discussion)
@endforeach
< /code>
//app.js
import {createApp} from 'vue/dist/vue.esm-bundler';
import SignupForm from './components/SignupForm.vue';
import LoginForm from './components/LoginForm.vue';
import DiscussionFilter from './components/DiscussionFilter.vue'
const app = createApp({});
app.component('signup-form',SignupForm);
app.component('login-form',LoginForm);
app.component('discussion-filter',DiscussionFilter);
app.mount('#app'); //#app goes from layouts/app.blade.php
< /code>
Fragment of my DiscussionFilter.vue
axios.get('/discussions/filter',{params:data})
.then((response) => {
$('#discussions-wrapper').html(response.data);
}).catch((error) => console.log(error));
< /code>
Problems is that template from controller renders my data in page but Vue component doesn't renders. It seems I need something like re render or re mount. But how I can achieve this?