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> 

を「アカウント/ initialLoadXはただのsetTimeoutを使用して遅延しながら

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

：（おそらく無関係なセクションが出て切り取ら付き）

その親コン​​ポーネントは次のようになります。プログレスバーコンポーネントの更新されたフックのデバッグ出力が表示されました。遅延呼び出し後にプロパティが正しく更新されました。ただし、プログレスバーは変更を無視します。まだ効果なし - 私もテスト目的のために、このデバッグ出力（私はそれが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があります。