laravel - Laravel/VueJs。如何根据传入的列值显示不同颜色的按钮？

问题描述

我正在遍历用户表。每个用户表都有一个按钮，用于在用户表上切换（更新：布尔类型）用户状态。我希望每个用户的按钮在用户的状态值为 0 时显示为红色，在状态为 1 时显示为绿色。我还希望按钮在每次单击时根据状态值更改颜色（LIVE） .

组件：ToggleStatus.vue

<template>
    <div>
      <button type="button" v-bind:class="buttonStatus" @click="goOnline">
          <span class="ion-ios-wifi" ></span>
      </button>
    </div>
</template>

    <script>
    export default {
      props: ['userId', 'onlinestat'],

      mounted() {
          console.log('Component mounted.')
      },

      data: function() {
        return {
          status: this.onlinestat,
          }
      },

      methods: {
        goOnline() {
          axios.post('/reservation/online/' + this.userId )
            .then(response => {
              this.status =! this.status;
              console.log(response.data);
            })
            .catch(errors => {
              if (errors.response.status == 401){
              window.location = '/login';
              }
            });
        }
      },

      computed: {
        buttonStatus() {
          return(this.status) ? 'btn btn-outline-danger text-danger' : 'btn btn-success ';
        }
      }

    }
   </script>

控制器：

      $authUser = Auth::user()->business_id;
      $employee = User::where('business_id', $authUser)->get()->sortBy('name');

      return view('backend.reservation.index', compact('employee'));

视图/刀片

    <div class="container-fluid flex-grow-1 container-p-y">
        <div class="uikit-example">
          <div class="row">

            @foreach ($employee as $key => $emp)
            <div class="col-lg-4 col-md-4 col-sm-12">
              <div class="card mb-4">
                <div class="card-body">
                  <div class="media align-items-center">
                    <img src="{{ asset('Upload/Images/Media/Avatar/Thumb/'.$emp->image) }}" alt class="ui-w-60 rounded-circle">
                    <div class="media-body pt-2 ml-3">
                      <h5 class="mb-2">{{ $emp->name }}</h5>
                      <div class="text-muted small mb-2">{{ $emp->phone }}</div>
                      <div class="text-muted small mb-2">{{ $emp->email }}</div>
                      <div class="text-muted small mb-2"><span>ID:&nbsp;</span>{{ $emp->user_code }}</div>
                    </div>

                    <div class="">
                      <toggleonline user-id="{{ $emp->id }}" onlinestat="{{ $emp->onlinestatus }}"></toggleonline>
                    </div>

                  </div>
                </div>
                <div class="card-footer text-center py-3">
                  {{-- <a href="#" class="btn btn-success rounded-pill">+&nbsp; Go Online</a> --}}

                  &nbsp;
                  {{-- <a href="#" class="btn icon-btn btn-default md-btn-flat rounded-pill"><span class="ion ion-md-mail"></span></a> --}}
                  {{-- <div class="float-right"> --}}
                      <a href="#" class="btn btn-primary rounded-pill mt-2">&nbsp; My Reservations</a>
                  {{-- </div> --}}
                </div>
              </div>
            </div>
          @endforeach
          </div>
        </div>

    </div>

我得到的结果是按钮确实切换，但所有用户的切换按钮在刷新页面或页面加载后变为红色。

标签： laravelvue.js

laravel - Laravel/VueJs。如何根据传入的列值显示不同颜色的按钮？

问题描述

解决方案

推荐阅读