0
Vueで他のメソッドを呼び出す方法は?vueの他のコンポーネントを呼び出す
ユーザータイプからkeyupはその後、もし
PostHomeコンポーネントでキーワードを検索したときに、私は=欲しい私はコンポーネントHeaderSearch
<template> <form action=""> <div class="form-group"> <div class="input-group"> <span class="input-group-btn"> <button class="btn" type="button"> <i class="fa fa-search"></i> </button> </span> <input type="text" @keyup="search(keyword)" v-model="keyword" class="form-control" placeholder="Search..."> </div> </div> </form> </template> <script> export default { data(){ return { keyword: "" }; }, methods: { search: function(keyword){ if(keyword == ''){ // Want call method fetchPost in PostHome component here }else{ } } } } </script>
を持っていると私は、コンポーネントPostHome
<template> <div> <div class="box r_8 box_shadow" v-for="post in posts"> <div class="box_header"> <a :href="post.url"> <h3 class="mg_bottom_10" v-text="post.title"></h3> </a> <small v-text="post.description"></small> <a :href="post.url" class="box_header_readmore">Read more</a> </div> <div class="box_body"> <a :href="post.url" v-show="post.thumbnail"> <img :src="post.thumbnail" class="img_responsive" style="min-height: 300px;background-color: #f1f1f1; "> </a> </div> <div class="box_footer" v-show="post.tags.length > 0"> <ul> <li v-for="tag in post.tags"> <a v-text="tag.name" href="javascript:void(0)"></a> </li> </ul> </div> </div> </div> </template> <script> export default { data(){ return { posts: null, } }, methods: { fetchPosts: function(){ var url = base_url + '/user/posts' this.$http.get(url).then(res => { this.posts = res.data; }); } }, created: function(){ this.fetchPosts(); } } </script>
を持っています= ''
呼び出し方法fetchPost方法
https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication – wostex
ます。またVuexを使用して記事を取得し、挿入するアクションを派遣することができます状態で突然変異を起こしている。 https://vuejs.org/v2/guide/state-management.html –
ありがとうございます。私はバスを使っています。$ emitとbus。$ on。それは私と一緒に働いています。 –