VueJS 中带有函数的自定义数据对象

Question

我正在尝试构建一个自定义 DataSource 对象作为表格组件的数据部分，但是 VueJS 似乎正在重写该对象以使其具有反应性。 vue 组件可以很好地访问直接数据值（即 this.dataSource.columns 或 this.dataSource.sort）但是我不能调用对象中的任何函数，并且我不能（例如）使用 dataSource .rows() 函数来检索过滤/排序的行数据。 Vue 只能使用计划的 javascript 数据对象吗？或者我可以使用什么技巧来完成这项工作？

我想在表格组件中使用该对象，例如：

<table ref="bodyTable" class="table-body">
    <tbody>
        <tr v-for="row in dataSource.rows" >
            <td v-for="column in dataSource.columns">{{row[column.name]}}</td>
        </tr>
    </tbody>
</table>

然而 vue 似乎无法使用 dataSource.rows 函数，或调用对象中的任何其他方法。

function RealtimeDataStore(columns,data,sort,filter){
    this.columns = columns;
    this._data = data;
    this.sort = sort;
    this.filter = filter;
    this.keyField = findKeyColumn();
    function updateData(data){
        //TODO: merge or insert the data into the this._data array
        //TODO: let parent component know data changed
    }
    function findKeyColumn(){
        for(var i=0;i<columns.length;i++){
            if(columns[i].isKey) return column[i].name;
        }
        return null;
    }
    function setSort(sortData){
        //TODO: verify sortData is in correct format and all columns are found
        this.sort = sortData;
        //TODO: let the component know data may have changed
    }
    function setFilter(filterData){
        //TODO: verify filterData is in correct format and all columns are found
        this.filter = filterData;
        //TODO: Let the component know data may have changed
    }
    function rows(){
        //TODO: filter data if needed
        //TODO: sort data if needed
        return this._data;   
    }

}

Answer 1

通常情况下，是的，对于 Vue 中的数据，最好坚持使用 plain javascript objects。

但是，在这种情况下，这并不是代码不起作用的原因。

首先，rows 在RealtimeDataStore 的范围内声明，并且在其外部无法访问。其次，代码不会将其作为函数调用。 row in dataSource.rows 应该是 row in dataSource.rows()。

这是一个如何让代码工作的示例。

console.clear()

function DataSource(){
    this.rows = function(){
      return [1,2,3]
    }
}

new Vue({
  el: "#app",
  data:{
    source: new DataSource()
  }
})

<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="app">
  <div v-for="row in source.rows()">
    {{row}}
  </div>
</div>

请注意，rows 作为new DataSource() 结果返回的对象上的函数公开。