Exploring Vue for the first time and navigating through accessing viewmodel data has me puzzled.
When should I utilize this.property versus vm.$data.property.
In this scenario with a table where I can select rows, there are methods in place to select all rows and deselect all rows. When deselecting, I can access selectedRows using this.selectedRows. However, when selecting, I need to use rowTableVm.$data.selectedRow as this.selectedRows is not defined.
How do I determine when to use this. as opposed to 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);
});
}
}
});