source

Vue.js를 사용한 어레이 콘텐츠 및 반응성 문제 해결

gigabyte 2022. 8. 18. 23:47
반응형

Vue.js를 사용한 어레이 콘텐츠 및 반응성 문제 해결

몇 년 전만 해도 하는 것은 나쁜 습관이었다

array = [];

어레이가 어딘가에서 참조되고 있는 경우는, 그 참조가 갱신되어 있지 않기 때문입니다.

올바른 방법은array.length = 0;

어쨌든 JavaScript는 업데이트 되었고 Vue.js라는 프레임워크가 있습니다.

Vue가 잡히지 않음array.length = 0;반응하지 않게 하려고요하지만 잡히긴 하죠array = [];

사용할 수 있습니까?array = [];아니면 아직 JavaScript가 고장났나요?

뭐랄까...myArray.splice(0)는 어레이의 내용을 클리어하고, 그 내용도 반응합니다.

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',

  data() {
    return {
      items: ["a", "b", "c"]
    }
  },
  methods: {
    flush() {
      this.items.splice(0);
    }
  }

});
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">

  <div v-for="i in items">{{i}}</div>

  <button @click="flush"> flush</button>
</div>

Vue는 어레이에 대한 다음과 같은 변경 사항을 감지할 수 없습니다.인덱스를 사용하여 항목을 직접 설정하는 경우(예: vm.items[indexOfItem] = newValue 어레이 길이를 수정하는 경우(예: vm.tem.length = newLength)

시작: 깊이 있는 반응성(어레이용)

리액티브 어레이의 클리닝은 다음과 같습니다.

yourArray.splice(0)

언급URL : https://stackoverflow.com/questions/57834381/clearing-an-array-content-and-reactivity-issues-using-vue-js

반응형