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

我对语义用户界面并不熟悉，但我能够构建一个可能指向正确方向的小组件。

基本上为了让条件进展，每当属性更新时，我都必须使用新的百分比调用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进度条

1 个答案: