The Boolean values in the vue change array are not changed on the page.

demo is here http://jsfiddle.net/mtcv824d/

<div id="app">
  <div @click="change(0)">
  {{arr[0]}}
  </div>
</div>
new Vue({
  el: "-sharpapp",
  data: {
    arr: [true, false, false]
  },
  methods: {
      change: function(index){
      alert(this.arr[index])
        this.arr[index] = !this.arr[index]
      alert(this.arr[index])
    }
  }
})
The output in the

method finds that the value has changed, but there is no change on the page. what is the reason?

Vue.js
Feb.20,2022

the document is written:
due to the limitation of JavaScript, Vue cannot detect the array of the following changes:

when you set an item directly using the index, for example: vm.items [indexOfItem] = newValue
when you modify the length of the array, for example: vm.items.length = newLength

ide/list.html-sharp%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B" rel=" nofollow noreferrer "> https://cn.vuejs.org/v2/guide.

you need to make a deep copy 

// 
this.arr[index] = JSON.parse(JSON.stringify(this.arr[index]))

Vue.$set

The key code of the

function can be one of the following. If the array subscript is assigned directly, the vue cannot listen for data updates. 

      this.arr.splice(index, 1, !this.arr[index])
      this.$set(this.arr, index, !this.arr[index])

this.$set (this.arr,index,ture/false)

Previous: The puzzle about url

Next: Mini Program's picture adaptation problem

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu