これまたはVMによるVueアクセスプロパティ$ data

Question

私はVueを初めて使いました。私はviewmodelデータにアクセスする方法については不明です。 いつthis.propertyを使用する必要がありますか？vm.$data.propertyをいつ使用する必要がありますか？

次の例では、私は行を選択できるテーブルを持っています。すべての行を選択し、すべての行を選択解除するメソッドがあります。選択解除では、私はthis.selectedRowsによってselectedRowsにアクセスできます。しかしselectではthis.selectedRowsが定義されていないので、rowTableVm.$data.selectedRowを使用する必要があります。

いつこれを使用する必要がありますか？いつvm。$ dataを使用する必要がありますか？

<tbody> 
    <tr v-for="row in get_rows()"> 
    <td> 
     <input type="checkbox" v-bind:value="row.id" v-model="selectedRows"> 
    </td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    </tr> 
</tbody> 

var rowTableVm = new Vue({ 
     el: '#rowTable', 
     data: { 
      rowList: [{..},{..}], 
      selectedRows: [] 
     }, 
     methods: { 
      get_rows: function get_rows() { 
       return this.rowList; 
      }, 
      deselect_rows: function() { 
       this.selectedRows= []; 
      }, 
      select_rowse: function() { 
       this.deselect_rows(); 
       this.get_rows().forEach(function (entry) { 
        rowTableVm.$data.selectedRows.push(entry.id); 
       }); 
      } 
     } 
    }); 

Answer 1

あなたが問題を抱えているのは、スコープが原因です。具体的には、forEachの内部のthisは、Vueインスタンスにバインドされなくなりました。この問題を解決するためには、以下のように、ループに入る前に、変数内の参照を格納してみてください。

一般に

select_rowse: function() { 
    this.deselect_rows(); 
    var this_vue_instance = this; 
    this.get_rows().forEach(function (entry) { 
     this_vue_instance.selectedRows.push(entry.id); 
    }); 
} 

、あなたは可能な限りvm.$dataを利用するのは避けるべきです。特に、コード全体に分散した変数への複数の参照があり、変数の名前を変更する必要がある場合は、thisは一貫性があります。絶対に必要な場合は変数参照のみを使用します。これはあまり頻繁ではありません。