Vue.js v-bind: стиль Псевдоэлемент :: после контекста icon

Question

У меня проблема.У меня есть Bootstrap Vue ProgressBar.Мне нужно добавить к классу ".progress-bar" псевдоэлемент :: after со значком contetn (из FontAwsome).И я тоже должен быть динамичным.Поскольку я реализовал шаги в моем ProgressBar (от 0 до 100), и я хочу, чтобы при нажатии на этот значок отображалась строка ProgressBar.

<b-progress v-bind:style="styleProgressBar" :value="counter"  :max="max"></b-progress>

 export default {
        components:{
            'navbar':navbar
        },
        name: "myPage",
        data() {
            return {
                counter: 0,
                max: 100,
                step:1,
            }
        },
        methods:{
            prev() {
                this.step--;
            },
            next() {
                this.step++;
                if (this.counter < 100) {
                    this.counter += 34;
                }
            }
        }
    }

Я также видел это: https://vuejs.org/v2/guide/class-and-style.html

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

Но я до сих пор не могу понять, как это сделать для моей ситуации. Может ли кто-нибудь мне помочь?

Answer 1

Похоже, вы хотели бы добавить один значок после индикатора выполнения.

Если это так, проверьте ниже демо, он использует один промежуток, имитирующий значок, а затем свяжите left, чтобы переместить значок.

Vue.config.productionTip = false
app = new Vue({
  el: "#app",
  data: {
    counter: 0,
    max: 100,
    intervalID: null
  },
  methods: {
    runTask: function () {      
      clearInterval(this.intervalID)
      this.counter = 0
      this.intervalID = setInterval(() => {
        this.counter = (this.counter+7)%this.max
      }, 1000)
    }
  }
})

.badge {
  background-color:green;
  border: 1px solid black;
  padding: 2px;
  transition: 1s;
}

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
  <button @click="runTask()">Run</button>
  <b-progress class="mt-1" :max="max" show-value>
     <b-progress-bar :value="counter" variant="success">
        <span class="badge" style="position:absolute;" :style="{'left':counter*100/max + '%'}" v-show="counter > 0">x</span>
     </b-progress-bar>
  </b-progress>
</div>