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

Posted 2023-02-16

【中文标题】Laravel/VueJs。如何根据传入的列值显示不同颜色的按钮？

【英文标题】：Laravel/VueJs. How can I display button with different color based on column value passed in?

【发布时间】：2019-12-23 08:02:50

【问题描述】：

我正在遍历用户表。每个用户表都有一个按钮，用于在用户表上切换（更新：布尔类型）用户状态。我希望每个用户的按钮在用户的状态值为 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>

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

【参考方案1】：

试试

buttonStatus() 
    return(this.status==0) ? 'btn btn-outline-danger text-danger' : 'btn btn-success ';

【讨论】：

我尝试了您的建议，按钮颜色正确。当值为 1 时，它也会按预期切换。但是当您单击 n 按钮时值为 0 时，它将在背景上将值从 0 更改为 1，并且没有颜色更改，当您第二次单击时，它会更改颜色变为绿色，值变为 0

为此，您必须使用正确的布尔值，而不是 0,1，您必须使用 true 和 false。否则将this.status =! this.status; 更改为if(this.status==0) this.status=1; else this.status=0;

非常感谢。这就是我所需要的，而且效果很好！