Question

我是Vue的新手，我不确定如何访问viewmodel数据。我何时需要使用this.property，何时必须使用vm.$data.property。

在下面的示例中，我有一个表格，我可以选择行，我有方法来选择所有行并取消选择所有行。取消选择后，我可以this.selectedRows访问selectedRows。在select中我必须使用rowTableVm.$data.selectedRow s因为this.selectedRows是未定义的。

我什么时候需要使用它。什么时候我需要使用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

您遇到问题的原因是由于范围界定。具体来说，this内的forEach不再绑定到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将保持一致。如果绝对必要，只使用变量引用，这应该是不常见的。

通过此访问属性或vm。$ data

1 个答案: