Vue(타이머)는 mounted가 데이터에 가져올 수 없는 데이터 문제를 해결합니다

1902 단어 Vue타이머mounteddata
vue에서 데이터 정의

 data() {
  return {
  isok:10,
}
}
vue에서 타이머를 사용하면 다음과 같이 mounted는 갈고리 함수입니다.

mounted(){
 
 console.log(this.isok)  // isok 10
 setInterval(function(){
 console.log(this.isok) //  isok
}, 3000);
 
}
왜 이러지?
왜냐하면 타이머의this는 윈도우를 가리킨다.
그럼 어떤 방법으로 이 문제를 해결할 수 있습니까?답은 있어요. 두 가지.
첫 번째:
화살표 함수로: 화살표 함수의this 지향은 고정불변(함수를 정의할 때의 지향)이고 vue에서 vue를 가리킨다.

 mounted(){
 setInterval(()=>{ consolog.log(this.isok) }, 3000);
 }
두 번째:
var that=this를 사용하면 정상적으로 호출할 수 있습니다.

 mounted(){
  var that=this;
  setInterval(()=>{
  console.log(that.isok)
  }, 3000);
 }
보충 지식: vue는 지정된 필드 정렬에 따라computed 방법을 사용합니다
나는 쓸데없는 말을 더 이상 하지 않겠다. 모두들 코드를 직접 보는 것이 좋겠다.

<div id="app">
   <ul>
    <li v-for="(stu,index) in students1">{{stu}}</li>
   </ul>
  </div>
  <script type="text/javascript">
   new Vue({
    el:"#app",
    data:{
     students:[
      {name:" a",age:20},
      {name:" b",age:21},
      {name:" c",age:18},
      {name:" d",age:19},
      {name:" f",age:18}
     ]
    },
    computed:{
     students1:function(){
      return sortKey(this.students,'age')
     }
    }
   })
   function sortKey(array,key){
    return array.sort(function(a,b){
     var x = a[key];
     var y = b[key];
     return ((x<y)?-1:(x>y)?1:0)
    })
   }
  </script>
위의 Vue(타이머)는 mounted가 데이터에서 얻을 수 없는 데이터 문제를 해결하는 것이 바로 편집자가 여러분에게 공유한 모든 내용입니다. 참고 부탁드리고 저희도 많이 사랑해 주세요.
Week2 - JavaScript (6)
템플릿 콜백 패턴이란?

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage