I am trying to find a way to target and remove a component that I duplicated using the v-for directive in my multiple stopwatch application. Currently, I can only delete the last duplicated component, but I want the ability to remove any targeted component. Below is the code for my "Counter" component:
<template>
<div class="chrono">
<h2><input type="text" :placeholder="'Chrono' + number" /></h2>
<div class="timer">
<input type="number" v-model.number="hours">:
<input type="number" v-model.number="minutes">:
<input type="number" v-model.number="seconds">
</div>
<div class="controls">
<button @click="handleCounter">{{ startStop }}</button>
<button @click="resetCounter">reset</button>
</div>
<slot></slot>
</div>
</template>
<script>
export default {
name: "Counter",
data() {
return {
hours: 0,
minutes: 0,
seconds: 0,
startStop: "start",
interval: "",
};
},
props:["number"],
methods: {
handleCounter() {
if (this.startStop === "start") {
this.interval = setInterval(
function () {
this.seconds++;
if (this.seconds + 1 > 60) {
this.minutes++;
this.seconds = 0;
}
if (this.minutes + 1 > 60) {
this.hours++;
this.seconds = 0;
this.minutes = 0;
}
}.bind(this),
1000
);
this.startStop = "stop";
} else if (this.startStop === "stop") {
clearInterval(this.interval);
this.startStop = "start";
}
},
resetCounter() {
this.seconds = 0;
this.minutes = 0;
this.hours = 0;
},
},
};
</script>
<style scoped lang="scss">
.chrono {
border: 1px solid black;
margin: auto;
border-radius: 5px;
}
.timer{
display: flex;
flex-flow: row;
justify-content: center;
}
.timer input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.timer input{
width: 25px;
border: none;
text-align: center;
}
</style>
Furthermore, here is the code for the App.vue file where I aim to duplicate or delete instances of my Counter component:
<template>
<section>
<button @click="addCounter">+</button>
<div class="listOfCounter" >
<Counter v-for="index in count" :key="index" :number="index">
<button @click="removeCounter">-</button>
</Counter>
</div>
</section>
</template>
<script>
import Counter from "./components/Counter.vue";
export default {
name: "App",
components: {Counter},
data() {
return { count: 1,
index:[]
};
},
methods: {
addCounter() {
this.count++;
},
removeCounter() {
this.count--;
},
},
};
</script>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>