Question

我想使用vue js 2和laravel在我的网站上制作搜索功能。但是我不知道如何使这个东西有效，因为我没有把搜索表单放在模板vue的同一个地方。

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');
 }
}
});

Answer 1

您必须在（默认情况下）resources/assets/js/app.js中定义组件：

Vue.component(
  'search-feature', 
  require('./components/search-feature.vue')
);

然后您可以在视图中的任何位置使用它：

<search-feature></search-feature>

然后，一旦准备好测试，就必须编译。您可以运行npm run dev（或使用npm run watch来监控文件更改）

当然，这只是一个基本的例子。

如何在vue js中调用不同范围的函数？

1 个答案: