the result of + 1 pops up after clicking the button, but why does the result show that there is no + 1 or the original value after the pop-up window disappears? Another question is that if I keep clicking this button, it should always be + 1. Why does the result of alert always be 112or 445? I didn"t understand
Test.vue
<template>
<div>
<div id="main">
<div id="center">
<div>
<div class="blog" v-for="(item, index) in all" :key="index">
<Test2 :info="item.info" :key="index" :indexs="index" v-on:increment1="incrementTotal"></Test2>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Test2 from "@/components/Test2"
export default {
name: "Blog",
data () {
return {
all: [
{content: {a: 111, b: "ccc"}, info: {num: [111]}},
{content: {a: 222, b: "ccc"}, info: {num: [444]}}
]
}
},
methods: {
incrementTotal: function (num2) {
alert(this.all[num2].info.num[0] + 1)
this.all[num2].info.num[0] + 1
}
},
components: {
Test2
}
}
</script>
<style scoped>
</style> Test2.vue
<template>
<div>
<button @click=change(indexs)>
{{info.num[0]}}
</button>
</div>
</template>
<script>
export default {
name: "Info",
props: ["info", "indexs"],
methods: {
// num2all
change (num2) {
this.$emit("increment1", num2)
}
}
}
</script>
<style scoped>
</style>