Как передать данные в VUE

Question

В 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, то оно встроено в мою страницу администратора, где я слушаю события.

Это просто строка

Answer 1

добавьте раздел данных в ваш скрипт следующим образом:

<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.