Component laravel + vue show users online/offline

Thanks for summing up both approaches I described above 🙂

Hi! Thanks a million :)

Tested this, and it works when i just call the controller -> .../check

But have to show users in my component. I am very new to vue and components

This dosent work:

// MY NEW CODE

@if(Cache::has('user-is-online-' . $user->id))
    <span class="text-success">Online</span>
@else
    <span class="text-secondary">Offline</span>
@endif

<div class="row">
  
  <template v-for="(chart, key) in charts">
    <div :class="chart.column_class" :key="key">
      <stats-card
        v-if="chart.type === 'Stats'"
        :chart-data="chart"
      ></stats-card>
      <latest-card
        v-else-if="chart.type === 'Latest'"
        :chart-data="chart"
      ></latest-card>
      <div v-else class="card">
        <div class="card-header card-header-primary card-header-icon">
          <div class="card-icon">
            <i class="material-icons">{{ chart.icon }}</i>
          </div>
          <h4 class="card-title">
            {{ chart.title }}
          </h4>
        </div>
        <div class="card-body">
          <component
            v-bind:is="`${chart.type}Chart`"
            :chart-data="chart"
            :options="chart.options"
          ></component>
        </div>
      </div>
    </div>
  </template>
</div>

import BarChart from '@components/Charts/Bar' import LineChart from '@components/Charts/Line' import PieChart from '@components/Charts/Pie' import StatsCard from '@components/Charts/Stats' import LatestCard from '@components/Charts/Latest' export default { components: { BarChart, LineChart, PieChart, StatsCard, LatestCard }, data() { return { datacollection: null, charts: null } }, created() { axios.get('dashboard').then(response => { this.charts = response.data }) } }

How to get this to work in my component ?

Nice of you to award the best reply to the person who copied the exact same approaches I outlined in my answer 😅

Hi!

Sorry about this, but i just clicked on the URL kossa gives me. And find solution to my problem. But same thing as you say. Set the best answer to you :) But do you know how to implement this in my component ? (using vue)

Hi!

Have made this vue component know, but this line dosent work -> Cache::has('user-is-onlin

   <h4 v-for="user in users">
       
       {{user.email}}

       <h1 v-if="Cache::has('user-is-online-' . user.id)">Vue is awesome!</h1>
    
   </h4>

export default { data() { return { users : {}, } }, methods: { loadUsers(){ axios.get("users").then(({ data }) => (this.users = data.data)); }, }, created() { this.loadUsers(); } }

Please help