Question

我正在尝试通过Vuejs实现类似的目标 Color coded list of client

这是我的Vue代码的样子

   ErrorException  : Declaration of App\Http\Controllers\manageAskedRapportController::authorize($id) should be compatible with App\Http\Controllers\Controller::authorize($ability, $arguments = Array)

  at C:\xampp\htdocs\monapp\app\Http\Controllers\manageAskedRapportController.php:17
    13|
    14|     public function refuse($id){
    15|         return view('unauthorized');
    16|     }
  > 17| }
    18|

  Exception trace:

  1   Illuminate\Foundation\Bootstrap\HandleExceptions::handleError("Declaration of App\Http\Controllers\manageAskedRapportController::authorize($id) should be compatible with App\Http\Controllers\Controller::authorize($ability, $arguments = Array)", "C:\xampp\htdocs\monapp\app\Http\Controllers\manageAskedRapportController.php", ["C:\xampp\htdocs\monapp\vendor\composer/../../app\Http\Controllers\manageAskedRapportController.php"])
      C:\xampp\htdocs\monapp\vendor\composer\ClassLoader.php:444

  2   include()
      C:\xampp\htdocs\monapp\vendor\composer\ClassLoader.php:444

  Please use the argument -v to see more details.

这是我的脚本，我有一个开关盒，我想用它来获得适当的css类

<div class="list-group-item" data-toggle="sidebar" data-sidebar="show" v-for="(client, index) in clients" :key="client.id">
    <a href="#" class="stretched-link"></a>
    <div class="list-group-item-figure">
        <div class="tile tile-circle" :class="getBgColor(++index)"> {{ client.name.charAt(0) }} </div>
    </div>
    <div class="list-group-item-body">
        <h4 class="list-group-item-title"> {{ client.name }} </h4>
        <p class="list-group-item-text"> {{ client.city }}, {{ client.country }} </p>
    </div>
</div>

Answer 1

您可以将您的类添加到数组中，然后在getBgColor(index)内检查已进行了多少转并减去所需的索引。我评论了该函数以进一步解释它。

此外，您无需在HTML中增加$index。

new Vue({
  el: "#app",
  data: {
    colorCounter: 0,
    clients: [{
        "name": "Leanne Graham",
        "email": "Sincere@april.biz",
      },
      {
        "name": "Ervin Howell",
        "email": "Shanna@melissa.tv",
      },
      {
        "name": "Clementine Bauch",
        "email": "Nathan@yesenia.net",
      },
      {
        "name": "Patricia Lebsack",
        "email": "Julianne.OConner@kory.org",
      },
      {
        "name": "Chelsey Dietrich",
        "email": "Lucio_Hettinger@annie.ca",
      },
      {
        "name": "Mrs. Dennis Schulist",
        "email": "Karley_Dach@jasper.info",
      },
      {
        "name": "Kurtis Weissnat",
        "email": "Telly.Hoeger@billy.biz",
      },
      {
        "name": "Nicholas Runolfsdottir V",
        "email": "Sherwood@rosamond.me",
      },
      {
        "name": "Glenna Reichert",
        "email": "Chaim_McDermott@dana.io",
      },
      {
        "name": "Clementina DuBuque",
        "email": "Rey.Padberg@karina.biz"
      }, {
        "name": "Leanne Graham",
        "email": "Sincere@april.biz",
      },
      {
        "name": "Ervin Howell",
        "email": "Shanna@melissa.tv",
      },
      {
        "name": "Clementine Bauch",
        "email": "Nathan@yesenia.net",
      },
      {
        "name": "Patricia Lebsack",
        "email": "Julianne.OConner@kory.org",
      },
      {
        "name": "Chelsey Dietrich",
        "email": "Lucio_Hettinger@annie.ca",
      },
      {
        "name": "Mrs. Dennis Schulist",
        "email": "Karley_Dach@jasper.info",
      },
      {
        "name": "Kurtis Weissnat",
        "email": "Telly.Hoeger@billy.biz",
      },
      {
        "name": "Nicholas Runolfsdottir V",
        "email": "Sherwood@rosamond.me",
      },
      {
        "name": "Glenna Reichert",
        "email": "Chaim_McDermott@dana.io",
      },
      {
        "name": "Clementina DuBuque",
        "email": "Rey.Padberg@karina.biz"
      }
    ],
    classes: ['bg-blue', 'bg-indigo', 'bg-purple', 'bg-pink', 'bg-red', 'bg-orange', 'bg-yellow', 'bg-green', 'bg-cyan']
  },
  methods: {
    getBgColor: function(index) {
      // Get length of  classes array
      let length = this.classes.length;

      // Get the current turn (how many times the classes have been used from start to finish)
      let turn = Math.floor(index / length);

      // Multiply turn by the length then subtract result from current index
      let colorIndex = index - (turn * length);

      return this.classes[colorIndex];
    }
  }

});

@import url("https://fonts.googleapis.com/css?family=Roboto");
.list {
  padding: 1rem;
  font-family: 'Roboto', sans-serif;
}

.list-group-item {
  display: flex;
  width: 100%;
}

.list-group-item .list-group-item-figure {
  display: flex;
  justify-content: center;
  align-items: center;
}

.list-group-item .list-group-item-figure .tile {
  border-radius: 50%;
  height: 2.5rem;
  width: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  text-transform: uppercase;
  font-weight: bold;
}

h4,
p {
  margin: 0.5rem;
}

p {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 1rem;
}

.bg-blue {
  background-color: blue;
}

.bg-indigo {
  background-color: indigo;
}

.bg-purple {
  background-color: purple;
}

.bg-pink {
  background-color: pink;
}

.bg-red {
  background-color: red;
}

.bg-orange {
  background-color: orange;
}

.bg-yellow {
  background-color: yellow;
}

.bg-green {
  background-color: green;
}

.bg-cyan {
  background-color: cyan;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
  <div class='list'>


    <div class="list-group-item" data-toggle="sidebar" data-sidebar="show" v-for="(client, $index) in clients" :key="$index">
      <a href="#" class="stretched-link"></a>
      <div class="list-group-item-figure">
        <div class="tile tile-circle" :class="getBgColor($index)"> {{ client.name.charAt(0) }} </div>
      </div>
      <div class="list-group-item-body">
        <h4 class="list-group-item-title"> {{ client.name }} </h4>
        <p class="list-group-item-text"> {{ client.email }}, {{ client.country }} </p>
      </div>
    </div>
  </div>
</div>

如何在for循环中的Vue中设置CSS类？

1 个答案: