Vuejs2 Vue 2.0和Semanticu进度条

我是VueJS新手，我想我有一个非常简单的问题要解决

我有一个简单的组件来包装Semantici进度条：

<template>
     <div class="column">
          <div class="ui orange inverted progress" v-bind:data-percent="progress" id="loading-bar">
                <div class="bar"></div>

                <div class="label">{{ label }}</div>
          </div>
     </div>
</template>

<script>
     export default {
          mounted() {
                window.$('#loading-bar').progress();
          },
          props: ['label', 'progress'],
          updated() {
                console.log(this._props.progress);
          },
     };
</script>

<style>
</style>

告诉我，属性在延迟调用后已正确更新。但是，进度条会忽略任何更改。我甚至试了一个

window.$('#loading-bar').progress(this._props.progress);

出于测试目的进行调试输出后（我认为这是因为不应该使用道具），仍然没有效果

那么我做错了什么？我是否误解了Vue的反应性或语义进度条的工作方式？我在SemanticUI VueJS绑定库中查找了一些示例，但它们很方便地忽略了进度条；）

提前感谢您的建议

---

Richard

我对语义UI不是很熟悉，但我能够构建一个小组件，为您指明正确的方向

基本上，为了让进度条前进，每当属性更新时，我必须用新的百分比调用

progress

插件。为此，我创建了一个调用它的方法，并在

mounted

和

watch

中调用该方法

Vue.component("v-progress", {
  template: "#bar-template",
  props:["label", "progress"],
  methods:{
    udpateProgress(){
       $(this.$refs.progress).progress({
        percent: this.progress
      });   
    }
  },
  watch:{
    progress(newVal){
      this.udpateProgress() 
    }
  },
  mounted(){
    this.udpateProgress()
  }
})

---

下面是一个。

不仅适用，而且我还了解到$refs不仅适用于子组件，而且适用于具有ref属性的所有元素。非常感谢。

window.$('#loading-bar').progress(this._props.progress);

Vue.component("v-progress", {
  template: "#bar-template",
  props:["label", "progress"],
  methods:{
    udpateProgress(){
       $(this.$refs.progress).progress({
        percent: this.progress
      });   
    }
  },
  watch:{
    progress(newVal){
      this.udpateProgress() 
    }
  },
  mounted(){
    this.udpateProgress()
  }
})