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>

而 'account/initialLoadX' 只是使用 setTimeout 延迟。现在进度条组件的更新钩子中的调试输出

console.log(this._props.progress);

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

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

此调试输出用于测试目的后（我认为 this._props 不应该被使用）- 仍然没有效果。

所以哪里做错了？我是否误解了 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.

Vue 2.0 和 SemanticUI 进度条

Vue 2.0 and SemanticUI progress bars

semantic-ui

vuejs2