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

通常，是的，最好坚持使用plain javascript objects来保存Vue中的数据。

然而，在这种情况下，这不是代码无法工作的原因。

首先，rows在RealtimeDataStore的范围内声明，并且无法在其外部访问。其次，代码并没有将其称为函数。 row in dataSource.rows应为row in dataSource.rows()。

以下是如何使代码生效的示例。

＆＃13;

console.clear()

function DataSource(){
    this.rows = function(){
      return [1,2,3]
    }
}

new Vue({
  el: "#app",
  data:{
    source: new DataSource()
  }
})

＆＃13;

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

＆＃13;

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

具有VueJS功能的自定义数据对象

1 个答案: