时间戳

首页 > 解决方案 > 如何将数据传递给vue

laravel - 如何将数据传递给vue

问题描述

在 ExampleComponent 中，我监听事件并接收用户的 IP。然后我想在vue中显示数据。但是我怎样才能传递这些数据（变量 $ip）？我的意思是不仅仅是 console.log 它，我应该将数据带到我的页面（console.log 有效）。

<script>
export default {
    data: function() {
        return {
   ip:''
},
     mounted() {
        window.Echo.channel('channelName')
            .listen('eventIp', (e) => {
              this.ip=e
            })
        }
     }
</script>

至于 ExampleComponent，它构建在我的管理页面中，我在那里监听事件。

它只是一行 <example-component>

标签： laravelvue.js

解决方案

在脚本中添加数据部分，如下所示：

<script>
export default {
data(){
   return{
     ip:''
   }
},

在脚本和内部模板标签之前添加一个 div、p、h1、span 等以显示 ip 变量。

<template>
.
.
.
<div v-html="ip"></div>
.
.
.
</template>

然后在收到频道信息时更改 ip 变量：

    mounted() {
        window.Echo.channel('channelName')
            .listen('eventIp', (e) => {
                this.ip=e
            })
   }
}

自动将值更改为 ip 值。

推荐阅读