来自其他Componet Vue JS和Laravel的调用方法

Question

我建立了一个小型社交网络，我需要在关注用户时更新朋友列表，laravel中的后端和vuejs中的前端。

单击跟随用户将更新可能的朋友列表，并更新另一个组件中的朋友列表。

刀

<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（componet）

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

Answer 1

如果我理解正确，则当用户单击添加或添加用户时，您正在尝试更新<amigos></amigos>和<no-amigos></no-amigos>组件。

为此，请使用vue-vuex ，vuex将允许您检测何时对此类数据进行了更改并对其进行处理。