bootstrapのProgressbarにvueの値を反映させたい

bootstrapのプログレスバーとvue.jsを組み合わせて使いたいと思っています。
w-75の部分でプログレスバーのボリューム調整が出来ますが、この75の部分をvue.jsで受け取る値と連動させたいと思っています。

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

w-75をw-{{count}} としてもダメですが、v-bind:class で指定する場合にどのように記載すれば良いのかが思いつきません。
どのように記載すればw-75の75の部分を動的に変更出来るがアドバイスいただけると助かります。

行動規範の内容に同意します

回答1件

ベストアンサー

bootstrap詳しくはないですが、

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
6<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
7
8<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
9<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
10<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
11
12<script src="https://cdn.jsdelivr.net/npm/vue"></script>
13
14</head>
15<body>
16  <div id="app">
17    <div class="progress">
18      <div :class="calcClass" role="progressbar" :aria-valuenow="count" aria-valuemin="0" aria-valuemax="100"></div>
19    </div>
20    <div class="progress">
21      <div class="progress-bar" role="progressbar" :style="calcStyle" :aria-valuenow="count" aria-valuemin="0" aria-valuemax="100"></div>
22    </div>
23  </div>
24</body>
25<script>
26var app = new Vue({
27  el: '#app',
28  data: function() {
29    return({
30      count: 40,
31    });
32  },
33  computed: {
34    calcClass: function() {
35      return("progress-bar w-" + [25, 50, 75, 100][Math.floor(this.count / 25)]);
36    },
37    calcStyle: function() {
38      return("width: " + this.count + "%");
39    }
40  }
41});
42setInterval(function() {
43  app.count = Math.random() * 100;
44}, 1000);
45</script>
46</html>
47