Vue公司2.0和SemanticUI进度条

Question

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

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

<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> 

它的父组件（具有可能不相关的部分剪掉了）看起来是这样的：

<template> 
    <v-layout> 
      <v-load-def label="Logging in..." :progress="test"></v-load-def> 
    </v-layout> 
</template> 

<script> 
    import store from '@/store'; 

    export default { 
      data() { 
       return { 
        test: 1, 
       }; 
      }, 
      mounted() { 
       store.dispatch('account/initialLoad1').then(() => { 
        console.log(this); 
        this.test = 20; 
        store.dispatch('account/initialLoad2').then(() => { 
          this.test = 60; 
          store.dispatch('account/initialLoad3').then(() => { 
           this.test = 100; 
          }); 
        }); 
       }); 
      }, 
      components: { 
       VLoadDef: require('@/components/load-def.vue'), 
      }, 
    }; 
</script> 

虽然“账户/ initialLoadX”只是推迟使用的setTimeout。现在调试输出在进度条组件的更新钩子

console.log(this._props.progress); 

告诉我，该属性在延迟调用后正确更新。但是，进度栏会忽略任何更改。仍然没有效果 - 我甚至这个调试输出用于测试目的（我把它this._props是不应该被使用）后尝试了

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

。

那么，什么做错了吗？我是否误解了Vue的反应性或SemanticUI进度条的工作方式？我看着在SemanticUI-VueJS结合库例子，但它们方便地离开了进度条;）

预先感谢任何建议，

理查德

Answer 1

我不是很熟悉的语义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() 
    } 
}) 

这里是working demo。