我建立了一个小型社交网络,我需要在关注用户时更新朋友列表,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();
    }
}

#1楼 票数:0 已采纳

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

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

  ask by SebastiaN translate from so

未解决问题?本站智能推荐:

1回复

如何在Vue.js中绑定Laravel生成的URL?

在组件中,我正在使用Axios获取当前用户的数据。 我以以下格式获取化身的网址: avatars/1/mNpxJNRrRPbbWSx0kuIL40JQJIF5SM5dscTq3zpv.jpeg 我需要将其插入Storage :: disk(“ s3”)。 那么我如何让变量化身出现在我的
1回复

如何将Vue.js软件包(如vodal)集成到Laravel中?

我有一个空的Laravel项目,并一直试图安装vodal( https://github.com/chenjiahan/vodal ),没有运气。 我知道vue.js的基础知识,但我仍然是初学者,之前从未在我的Laravel应用程序中使用过Vue.js包。 注意:我能够下载htt
2回复

在Laravel + Vue.Js中不在自定义路线中创建的视图

我正在使用Laravel 5.5和Vue.js 2.0 当我打开example.com并单击“ 显示项目”时,就会触发此网址 example.com/items 这是结果 当我直接打开此URL example.com/items它仅显示我从Laravel获得的json响应,而
1回复

Vue导出默认在Laravel模板中不起作用

我在Laravel中使用VueJS,当我创建Vue组件并将其导出时,它可以完美工作,但是当我在脚本@section的Laravel刀片中使用export default时,它不起作用。 App.js App.blade.php在这里我通过脚本部分创建 Larave Blad
1回复

Vue / Laravel如何将表单从刀片传递到Vue以使用checkValidity

跟随vue(单个组件)制作的按钮。 当前的问题是如何将表单传递给vue以使用checkValidity()方法。 laravel blade是以下类型的源代码。 如果有想法如何将表单从刀片传递到Vue,请提供帮助。
1回复

如何在从视图刀片laravel加载的vue组件上添加条件?

我的视图刀片laravel像这样: 视图刀片laravel加载两个vue组件。 分别是交易组件和交易模式组件。 因此,如果执行了视图刀片,它将运行组件 我的交易组件是这样的: 我的交易模式如下: 从脚本中,如果调用了视图刀片,则将运行事务模式组件。 如果用户单
1回复

路由器视图和Vue应用程序中的组件(laravel)

我正在尝试在Laravel刀片文件中添加路由器视图和组件。 router-view可完美运行,并根据页面URL更改组件。 但是我想在router-view上方添加一个<nav></nav>组件,以便可以在每个页面的导航中加载。 我的问题是,怎么了? 它不起作用
0回复

[Vue 警告]:未知的自定义元素: - 您是否正确注册了组件?

我正在尝试创建我的第一个组件,但我遇到了问题。 任何建议我如何解决这个问题 这是我的jsbin: http://jsbin.com/hijuyofeko/edit?html,js,output