使用VUe的多个秒表

Question

我是Vue的新手。

我正在使用Vue制作多个秒表。我被困住了，因为我的组件正在更新组件的所有实例上的值，而不是只更新其中一个。

这是我尝试过的：

<div id="app">
    <user-name></user-name>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<script type='text/x-template' id="test-template">
<div>
    <div class="column" v-for="(item, index) in items" :key="index">
        <div class="ui segment">
            <h3 class="ui blue header">{{parentTitle}}</h3>
            <h2 class="ui greenheader">{{item.name}}</h2>
            <div class="column">
                <p class="ui huge header">
                    {{ hours }} : 
                    {{ minutes | zeroPad }} :
                    {{ seconds | zeroPad }} :
                    {{ milliSeconds | zeroPad(3) }}</p>
                <button class="ui secondary button" @click="startTimer" 
                    :disabled="isRunning">START</button>
                <button class="ui button" @click="pushTime" :disabled="!isRunning">LAP</button>
                <button class="ui button" @click="stopTimer" :disabled="!isRunning">STOP</button>
                <button class="ui basic button" @click="clearAll">CLEAR</button><br><br>
                <ul class="ui bulleted list" v-if="times.length">
                    <li class="item" v-for="item in times">
                        {{ item.hours  }} :
                        {{ item.minutes | zeroPad }} :
                        {{ item.seconds | zeroPad }} :
                        {{ item.milliSeconds | zeroPad(3) }}
                    </li>
                </ul>
                <br><br>
            </div>
        </div>
    </div>
  </div>
</script>
<script>
  Vue.component('user-name', {

    data() {
        return {
            parentTitle: "Employee Names",
            test: "welcome",

            times: [],
            animateFrame: 0,
            nowTime: 0,
            diffTime: 0,
            startTime: 0,
            isRunning: false,
            items: [{
                    id: 1,
                    name: 'Employee 1'
                },
                {
                    id: 2,
                    name: 'Employee 2'
                }
            ],
            count: 0
        }
    },
    template: '#test-template',
    methods: {
        // 現在時刻から引数に渡した数値を startTime に代入
        setSubtractStartTime: function (time) {
            var time = typeof time !== 'undefined' ? time : 0;
            this.startTime = Math.floor(performance.now() - time);
        },
        // タイマーをスタートさせる
        startTimer: function () {
            // loop()内で this の値が変更されるので退避
            var vm = this;
            //console.log(this);
            //alert(timer0.innerText);
            vm.setSubtractStartTime(vm.diffTime);
            // ループ処理
            (function loop() {
                vm.nowTime = Math.floor(performance.now());
                vm.diffTime = vm.nowTime - vm.startTime;
                vm.animateFrame = requestAnimationFrame(loop);
            }());
            vm.isRunning = true;
            //alert(innerText);
        },
        // タイマーを停止させる
        stopTimer: function () {
            this.isRunning = false;
            cancelAnimationFrame(this.animateFrame);
        },
        // 計測中の時間を配列に追加
        pushTime: function () {
            this.times.push({
                hours: this.hours,
                minutes: this.minutes,
                seconds: this.seconds,
                milliSeconds: this.milliSeconds
            });
        },
        // 初期化
        clearAll: function () {
            this.startTime = 0;
            this.nowTime = 0;
            this.diffTime = 0;
            this.times = [];
            this.stopTimer();
            this.animateFrame = 0;
        }
    },
    computed: {
        // 時間を計算
        hours: function () {
            return Math.floor(this.diffTime / 1000 / 60 / 60);
        },
        // 分数を計算 (60分になったら0分に戻る)
        minutes: function () {
            return Math.floor(this.diffTime / 1000 / 60) % 60;
        },
        // 秒数を計算 (60秒になったら0秒に戻る)
        seconds: function () {
            return Math.floor(this.diffTime / 1000) % 60;
        },
        // ミリ数を計算 (1000ミリ秒になったら0ミリ秒に戻る)
        milliSeconds: function () {
            return Math.floor(this.diffTime % 1000);
        }
    },
    filters: {
        // ゼロ埋めフィルタ 引数に桁数を入力する
        // ※ String.prototype.padStart() は IEじゃ使えない
        zeroPad: function (value, num) {
            var num = typeof num !== 'undefined' ? num : 2;
            return value.toString().padStart(num, "0");
        }
    }
});

new Vue({
    el: "#app",
});
</script>

这里是工作中的JSFiddle示例here

非常感谢您的帮助。

Answer 1

这是您的问题的解决方案jsfiddle

在您的代码中，您正在混合来自vue实例的数据和组件的数据。

解决方案是使道具通过道具。您可以使用v-for

多次添加组件，而不用拥有1个组件

这是您的vue实例+数据：

 new Vue({
    el: "#app",
    data() {
        return {
            people: [{
                    id: 1,
                    name: 'Employee 1'
                },
                {
                    id: 2,
                    name: 'Employee 2'
                }
            ]
          }
        }
});

解决方案是通过道具将人的数据传递到组件，并根据数组中的需要渲染该组件许多时间。

<user-name  v-for="(person, index) in people" :key="person.id" :item="person"></user-name>


Vue.component('user-name', {
            props:['item'],
.....