Vue 1类绑定总是返回false

Question

I am working on this Laravel Social Network Script and it uses Vue 1.0.26.

My objetive is to bind the class connected or disconnected according to the user status which is true or false. I created a Laravel API to get the user status:

Controller (Laravel):

// $id = User id - https://www.mysite.uy/api/v1/status/{userid}
public function getUserStatus($id)
{
    $active = false;

    $open_session = \App\OpenSession::where('user_id', $id)->first();

    if($open_session) {
        if(Carbon::parse($open_session->created_at)->diffInSeconds(Carbon::parse($open_session->expires)) < 86400 && $open_session->active > 0) {
            $active = true;
        }
    }
    return response()->json($active);
}

This works fine from the URL, it returns true or false, but then here is some view.blade.php:

<li class="list-group-item" v-for="conversation in conversations.data" v-if="conversation.user"> <!-- Conversaciones -->
    <a href="#" @click.prevent="showChatBox(conversation)">
        <div class="media">
            <div class="media-left">
                <img v-bind:src="conversation.user.avatar" alt="images">
            </div>
            <div class="media-body">
                <h4 class="media-heading">
                    @{{ conversation.user.name }} 
                    <i v-bind:class="getUserStatus(conversation.user.id)"></i> <!-- <-- look at here -->
                </h4>
                <span class="pull-right active-ago" v-if="message">
                    <time class="microtime" datetime="@{{ message.created_at }}" title="@{{ message.created_at }}">
                    @{{ message.created_at }}
                    </time>
                </span>
            </div>
        </div> 
    </a>
</li>

This block is being displayed as <i></i> on the HTML when using the getUserStatus() method on computed:

<h4 class="media-heading">
    @{{ conversation.user.name }} 
    <i v-bind:class="getUserStatus(conversation.user.id)"></i> <!-- <-- look at here -->
</h4>

And this displays <i class="status disconnected"></i> even when the response.data is true and I check it with console.log(response.data == true):

<h4 class="media-heading">
    @{{ conversation.user.name }} 
    <i v-bind:class="['status', getUserStatus(conversation.user.id) ? 'connected' : 'disconnected' ]"></i>
</h4>

And here is the Vue stuff:

data: {
    status: {
      on: 'connected',
      off: 'disconnected'
    },
},
created: {
    ...
},
methods: {
  getUserStatus: function(userid)
  {
    this.$http.post(base_url + 'api/v1/status/' + userid).then(function(response) {
      if(response.data == 'true') {
        return true;
      } else {
        return false;
      }
    });
  },
},
computed: {
  /*getUserStatus: function(userid)
  {
    this.$http.post(base_url + 'api/v1/status/' + userid).then(function(response) {
      return {
        status: true,
        connected: response.data == 'true',
        disconnected: response.data == 'false'
      }
    });
  }*/
}

I only have one of the methods "working", but I switch them. I am reading this guide but I get this is for Vue 2.

Answer 1

Ok, I made it work by adding a default variable in data and changing it later:

data: {
    ...
    userStatus: {},
}

And in the method. As you can see I made some irrelevant changes on the Controller side.

methods: {
    getUserStatus: function(userid)
    {
        var userStatus = this.$http.post(base_url + 'api/v1/status/' + userid).then(function(response) {
            this.userStatus = JSON.parse(response.data);
        });

        return this.userStatus.status;
    },
    ...
}

And in the HTML side I use:

<h4 class="media-heading">
    @{{ conversation.user.name }}
    <i class="status connected" v-bind:class="[ 'status', getUserStatus(conversation.user.id) ? 'connected' : 'disconnected' ]"></i>
</h4>

Now I have a different issue: The function seems to run repeteadly so the status are constantly changing. All the other functions runs once.