Question

我正在处理此Laravel Social Network Script，并使用 Vue 1.0.26 。

我的目标是根据 true 或 false 已连接或已断开连接 >。我创建了一个Laravel API来获取用户状态：

控制器（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);
}

这可以通过网址正常工作，返回 true 或 false ，但接下来是 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>

在计算上使用 getUserStatus（）方法时，此块在HTML上显示为<i></i>：

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

即使 response.data 为true，我也会显示<i class="status disconnected"></i>，并使用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>

这是Vue的东西：

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'
      }
    });
  }*/
}

我只有一种方法“工作”，但我切换它们。我正在阅读this guide但我得到的是Vue 2。

Answer 1

好的，我通过在data中添加默认变量并稍后更改它来实现它：

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

并且在方法中。如您所见，我在Controller端进行了一些无关的更改。

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;
    },
    ...
}

在HTML方面我使用：

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

现在我有一个不同的问题：该功能似乎反复运行，因此状态不断变化。所有其他功能都运行一次。

Vue 1类绑定总是返回false

1 个答案: