как вызвать функцию в V-если у меня не работает

Question

У меня есть файл VUE, где шаблон закодирован следующим образом.

<template>
<div class="pull-right">
    <i class="fa fa-circle green" v-if="checkUser()"></i>
    <i class="fa fa-circle red" v-else></i>
</div>
</template>

И скрипт такой:

<script>
export default {
    props: ['user', 'onlineusers'],
    methods: {
        checkUser: function(){
            var online = false;
            var status =  _.find(this.onlineusers ,{id: this.user.id});
            if(status != undefined)
            {
                online = true
            }

            return online;
        }
    }
}
</script>

Я тоже так пробовал.

<script>
export default {
    props: ['user', 'onlineusers'],
    methods: {
        checkUser: function(){
           return _.find(this.onlineusers ,{id: this.user.id});

        }
    }
}
</script>

Но ничего не работает.Я новичок в VUE.Кто-нибудь может помочь?

Обновление: в файле app.js, где собираются данные о пользователях в сети.

  if(fromId != 'null'){

        Echo.join('Online')
            .here((users) => {
                this.onlineUsers = users;
            })
            .joining((user) => {
                this.onlineUsers.push(user);
            })
            .leaving((user) => {
                this.onlineUsers = this.onlineUsers.filter((u) => {u != user});
            })
    }

Это тег пользователя онлайн.

   <onlineuser v-bind:user="{{$user}}" v-bind:onlineusers="onlineUsers"></onlineuser>

Answer 1

Попробуйте это:

    <template>
      <div class="pull-right">
      <i class="fa fa-circle green" v-if="online"></i>
      <i class="fa fa-circle red" v-else></i>
    </div>
   </template>

   <script>
    export default {
    props: ['user', 'onlineusers'],
    computed: {
        online (){
           return this.onlineusers.find(user => user.id == this.user.id);
         }
       }
     }
   </script>

Answer 2

Ваш checkUser возвращает логический, а не повторяемый элемент.

Вы должны вернуть что-то, что может зациклить vue.

Answer 3

<i class="fa fa-circle green" v-if="checkUser"></i>

<script>
export default {
    props: ['user', 'onlineusers'],
    computed: {
      checkUser(){
        return _.find(this.onlineusers ,{id: this.user.id});
      }
    }
    }
}
</script>

Можете ли вы попробовать использовать вычисляемое свойство, как указано выше.