Vue Jsでのデータ/モデル更新の遅延

Question

私の現在の作業と似た例を作成しました。私は、データがisNaNであるかどうかを確認し、それがある場合は、ゼロにそれを変更]ボタンをクリックします。この例では

var App = new Vue({ 
 
    el:'#app', 
 
    data:{ 
 
    demoText:'text', 
 
    sections:2, 
 
    sectionData:[0,0] 
 
    }, 
 
    methods:{ 
 
    changeData:function(){ 
 
     for(var i=0;i<this.sections;i++){ 
 
     if(isNaN(this.sectionData[i])) 
 
      this.sectionData[i]=0; 
 
     } 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 

 
<div id='app'> 
 
    
 
    <div v-for="n in sections"> 
 
    <input type="text" v-model=sectionData[n-1]> 
 
    </div> 
 
    
 
    <input type="button" @click="changeData" value="click"> 
 
</div>

、。しかし、この更新されたデータはすぐにDOM/textboxで更新されません。その後、別のテキストボックスで更新すると、保留中の更新アクションが発生します。

この問題を解決するにはどうすればよいですか？

Answer 1

ここにはいくつかの問題があります。

まずあなたがインデックスによってそれを変更するとき、あなたのclickハンドラで作っているVue cannot detect the changeということです。これは、Vueで配列を変更するときの一般的な警告です。

第2に、テキストボックスを空白にすると、isNaN("")はfalseに解決されるコードにバグがあります。これは多くの場所でdocumentedです。私は以下のコードでこれについて非常に素朴な修正を実装しましたが、より強力なソリューションを探してください。

var App = new Vue({ 
 
    el:'#app', 
 
    data:{ 
 
    demoText:'text', 
 
    sections:2, 
 
    sectionData:[0,0] 
 
    }, 
 
    methods:{ 
 
    changeData:function(){ 
 
     this.sectionData = this.sectionData.map(d => isNaN(parseInt(d,10)) ? 0 : d) 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 

 
<div id='app'> 
 
    
 
    <div v-for="n in sections"> 
 
    <input type="text" v-model=sectionData[n-1]> 
 
    </div> 
 
    
 
    <input type="button" @click="changeData" value="click"> 
 
</div>

あなたのクリックハンドラの別の代替実装が答えを

for (let i=0; i < this.sectionData.length; i++) 
    if (isNaN(parseInt(this.sectionData[i],10))) 
    this.sectionData.splice(i, 1, 0)