Question

我在更新Vue时遇到问题。我已经找到了解决方法，但是我不知道为什么会起作用，所以我犹豫要使用它。

有人可以向我解释为什么Vue注意到本地模式更改而不是小时/分钟更改吗？

在下面的代码中，您会注意到一行已被注释掉。 //this.time.local（）;

如果我在注释行的情况下运行此标签，则标签将永远不会更新。

如果我取消注释该行，Vue突然开始注意到get timeString具有新值并适当地更新标签。

这是我的html正文

<div id="test" name="test">
    <template>
        <v-app>
            <v-text-field v-model="model.timeString"></v-text-field>
            <label>{{model.timeString}}</label>
        </v-app>
    </template>
</div>
<script src="~/Scripts/Test.js"></script>

<script>
    var Vue, vm;
    $(function () {
        vm = new VueModels.Test();
        const vueTest = new Vue({
            el: '#test',
            data: {
                model: vm
            }
        });
        return vueTest;
    });

</script>

和我的Test.ts文件

namespace VueModels {
    export class Test {
        time: moment.Moment = moment.utc('01/01/2001 00:00', 'MM/DD/YYYY HH:mm').tz('US/Eastern');
        get timeString(): string {
            return this.time.format('HH:mm');
        }
        set timeString(value: string) {
            let hour: number = parseInt(value.split(':')[0]);
            let minute: number = parseInt(value.split(':')[1]);
            this.time.set('hour', hour);
            this.time.set('minute', minute);
            //this.time.local();
        }
    }
}

这是我正在使用的外部资源

  <package id="Moment.js" version="2.22.2" targetFramework="net461" />
  <package id="Moment.Timezone.js" version="0.5.13" targetFramework="net461" />
  <package id="moment.TypeScript.DefinitelyTyped" version="1.8.3" targetFramework="net461" />
  <package id="moment-timezone.TypeScript.DefinitelyTyped" version="0.1.2" targetFramework="net461" />

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.0.0-alpha.3/vuetify.min.js"></script>

编辑：

我刚刚意识到将.local（）调用添加到getter上也行得通...而且我现在更加困惑

namespace VueModels {
    export class Test {
        time: moment.Moment = moment.utc('01/01/2001 00:00', 'MM/DD/YYYY HH:mm').tz('US/Eastern');
        get timeString(): string {
            this.time.local();
            return this.time.format('HH:mm');
        }
        set timeString(value: string) {
            let hour: number = parseInt(value.split(':')[0]);
            let minute: number = parseInt(value.split(':')[1]);
            this.time.set('hour', hour);
            this.time.set('minute', minute);
        }
    }
}

Vue不会被格式化，除非调用了local

0 个答案: