I'm looking to implement a search feature on my website using Vue.js 2 and Laravel. However, I am facing an issue as the search form is not located in the same place as the Vue template.
header.blade.php
<form action="javascript:void(0);" method="get">
<input type="search" placeholder="Search..." v-model="search" @keyup.enter="searchPost()" autofocus>
</form>
Home.vue
<div class="panel panel-default" v-for="post in posts">
<div class="panel-heading">
<a :href="'/' + $route.params.trans + '/post/' + post.slug"><h3>{{ post.title }}</h3></a>
<small class="date" v-if="timeLang =='en'">{{ post.created_at | formatDateEn }}</small>
<small class="date" v-else-if="timeLang =='id'">{{ post.created_at | formatDateId }}</small>
</div>
<div class="panel-body">
<img :src="'/images/post/' + post.post.image" class="img-single-page img-responsive" alt="" v-if="post.post.image">
<p>{{post.body | strip_tags | trunCate}}</p>
<a :href="'/' + $route.params.trans + '/post/' + post.slug" class="btn readmore">Read More</a>
</div>
</div>
<script>
export default {
data()
{
return {
posts: {},
}
},
created(){
this.$on('fetchdata', this.fetchPost);
},
methods: {
fetchPost() {
axios.get('/' + this.$route.params.trans + '/search?search=' + this.search)
.then(({data}) => {
this.posts = data
}
}
app.js
const app = new Vue({
el: '#app',
router,
data: {
show: false,
search: '',
},
methods: {
searchPost() {
this.$emit('fetchdata');
}
}
});