从另一个组件vue js和laravel调用方法

Posted 2023-02-23

【中文标题】从另一个组件vue js和laravel调用方法

【英文标题】：Call method from other componet vue js & laravel

【发布时间】：2018-01-23 23:06:55

【问题描述】：

我做了一个小型社交网络，我需要在关注用户时更新好友列表，后端在 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（组件）

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

【参考方案1】：

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

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