Vue 1 类绑定总是返回 false答案

【问题标题】：Vue 1 class binding returning always falseVue 1 类绑定总是返回 false
【发布时间】：2023-03-06 12:22:01
【问题描述】：

我正在处理这个 Laravel Social Network Script，它使用 Vue 1.0.26。

我的目标是根据用户状态true或false绑定connected或disconnected类>。我创建了一个 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);
}

这从 URL 中可以正常工作，它返回 true 或 false，但这里有一些 view.blade.php： p>

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

在 computed 上使用 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 为真，这也会显示 <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 的。

【问题讨论】：

我认为你应该返回 $http 函数的结果。 getUserStatus: function(userid) { return this.$http.post etc.. }
@BelminBedak 有什么区别？无论如何我都对其进行了测试，但它会选择内存并导致：uncaught exception: out of memory

标签： javascript php laravel vue.js

【解决方案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>

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

【讨论】：