VueJs의 로컬 스토리지에서 새로 생성된 행을 '관찰'하는 방법은 무엇입니까?

VueJs의 로컬 스토리지에서 새로 생성된 행을 '관찰'하는 방법은 무엇입니까?

저는 VueJs에서 그리드 같은 컴포넌트를 만드는 일을 하고 있습니다.JSFiddle은 https://jsfiddle.net/masade/nrb9f4j2/에서 확인할 수 있습니다.

• 상기의 조작에서는,<datacell>컴포넌트는 임의의 셀에 대해 인라인 편집을 허용하기 위해 사용됩니다.
• 나는 그 변화에 주목하고 있다.rows로컬 스토리지에 저장합니다.
• 새로 생성된 행을 상위 개체로 푸시하는 중this.$parent.unshift(newrow)에서<addrow>요소

문제는 새 행을 추가할 때 로컬 스토리지 행에 추가되지만 변경 사항이 감시되지 않는다는 것입니다.

문제를 복제하는 단계(JS fidelen):

• 행 추가를 클릭하고 추가할 이름을 입력합니다.
• 행이 추가되면 두 번째 열(년)을 클릭하여 업데이트합니다.
• 새로 추가된 행에 대한 변경 내용이 업데이트되지 않습니다.
• 하지만 페이지를 새로 고치고 다시 수정하면 다시 업데이트할 수 있습니다.

제가 잘못하고 있다면 이해시켜 주세요.

Vue에서 변경 감지 경고 중 하나를 발견했습니다.Vue는 해당 개체의 인덱스를 사용하여 개체에 속성을 추가한 경우를 감지할 수 없습니다.

정의하다newrow다음과 같습니다.

data: function(){
    return {
        newrow : {}
    }
},

즉,newrow속성이 없습니다.그런 다음 항상 속성을 추가합니다.newrow다음과 같은 인덱스를 사용합니다.

this.$parent.cols.map(function(col,index){
  if(typeof newrow[col.m] == "undefined")
    newrow[col.m] = "";
})

즉, Vue는 방금 추가한 속성에 대해 전혀 알지 못합니다.

당신의 바이올린에 Method를 추가했습니다.makeNewRow필요한 속성을 추가합니다.newrow올바르게 사용$set방법.

makeNewRow(){
    this.newrow = {};
    this.$parent.cols.map((col,index) => this.$set(this.newrow, col.m, null))
},

그럼 내가 전화하지mounted그리고 당신의 안에addRow방법.이것으로 버그가 수정됩니다.최신 바이올린입니다.

주의: 코드에 수정한 추가 버그가 있습니다.다른 사람이 당신의 앱을 열었지만 이전에 앱을 열지 않은 경우grid-vue-local로컬 스토리지에 저장하면uid위해서gridStorage0이 되고 처음 추가한 행의 ID는 0이 됩니다.이것을 수정하기 위해 나는 간단히 덧붙였다.

save: function (rows) {
  gridStorage.uid = rows.length
  localStorage.setItem(STORAGE_KEY, JSON.stringify(rows))
}

data(){
   return{
     items:localStorage.fetch()
   }
}


watch:{
   items:{
     handler:function(items){
        localStorage.save(items);
     },
     deep:true
   }
}

아이템을 저장하고 아이템을 볼 수 있습니다. 아이템이 변경되면 갱신됩니다.

언급URL : https://stackoverflow.com/questions/43949593/how-to-watch-newly-created-rows-in-local-storage-in-vuejs