1
我做了一個小型的社交網絡，我需要那個時候跟着一個用戶朋友列表被更新，後端在laravel和vuejs前端。來自其他組件的調用方法js＆laravel
繼用戶後點擊更新可能的朋友列表並更新另一個組件中的朋友列表。
葉片
<div class="col-md-2"><amigos></amigos></div>
<div class="col-md-8"><post-list></post-list></div>
<div class="col-md-2"><no-amigos></no-amigos></div>
app.js
Vue.component('post-list', require('./components/Posts.vue'));
Vue.component('amigos', require('./components/Amigos.vue'));
Vue.component('no-amigos', require('./components/noamigos.vue'));
const app = new Vue({
el: '#app'
});
noamigos.vue（組分）
<template>
<div class="panel panel-default">
<div class="panel-heading">Amigos sugeridos</div>
<div class="panel-body">
<div class="list-group" v-for="item in noamigos">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">{{item.name}}</h4>
<button class="label label-success btn" v-on:click="seguir(item)"><b>+</b> Seguir</button>
</a>
</div>
</div>
</div>
</template>
<script>
export default{
data:()=>({
noamigos: [],
}),
methods:{
listarNO:function(){
axios.get('noamigos').then(response =>{
this.noamigos = response.data;
})
},
seguir:function(codigo){
axios({
method: 'POST',
url: 'noamigos',
data: {
codigo: codigo.id_,
},
}).then((response) => {
this.listarNO();
//do somethig to call method listarSi() on Amigos component
}).catch((error) => {
console.log(error);
});
}
},
created(){
this.listarNO();
}
}
Amigos.vue（及部件）
<template>
<div class="panel panel-default">
<div class="panel-heading">Mis Amigos</div>
<div class="panel-body">
<div class="list-group" v-for="item in siamigos">
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">{{item.name}}</h4>
</a>
</div>
</div>
</div>
</template>
<script>
export default {
data:()=>({
siamigos: [],
}),
methods:{
listarSI:function(){
axios.get('amigos').then(response =>{
this.siamigos = response.data;
})
},
},
created(){
this.listarSI();
}
}