鍍金池/ 問(wèn)答/HTML/ vue這個(gè)數(shù)據(jù)為什么沒(méi)有變化?

vue這個(gè)數(shù)據(jù)為什么沒(méi)有變化?

點(diǎn)擊按鈕后可以彈出+1的結(jié)果 但是彈窗消失后為什么結(jié)果顯示并沒(méi)有+1 還是原來(lái)的值 這是為什么?還有一個(gè)問(wèn)題 如果我一直點(diǎn)這個(gè)按鈕應(yīng)該一直+1才對(duì)啊 為什么alert的結(jié)果一直都是112或445呢?昨天想了一天也沒(méi)想明白
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: {
    // num2表示all數(shù)組的第幾條數(shù)據(jù)
    change (num2) {
      this.$emit('increment1', num2)
    }
  }
}
</script>

<style scoped>
</style>
回答
編輯回答
念舊

建議深復(fù)制一下原來(lái)的this.all 變?yōu)閏loneAll

然后改變cloneAll里面的[num2].info.num[0]

然后在把this.all=cloneAll

深復(fù)制可以百度一下很簡(jiǎn)單的

2017年10月12日 20:29
編輯回答
念舊
this.all[num2].info.num[0] + 1

改成

this.all[num2].info.num[0] += 1

如果不能觸發(fā)更新
vue數(shù)組更新檢測(cè)

2018年5月12日 09:58