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

Posted 2023-02-23

【中文标题】VueJS 中带有函数的自定义数据对象

【英文标题】：Custom data object with functions in VueJS

【发布时间】：2018-03-08 05:48:20

【问题描述】：

我正在尝试构建一个自定义 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;   
    

【参考方案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() 结果返回的对象上的函数公开。

【讨论】：

谢谢 - 我错过了。当行发生变化时，有什么方法可以触发反应事件？使用简单的数据对象，vue 在其上设置了一个 Observer - 我可以对一个函数做同样的事情吗？

@JohnP 好吧，你可以把它变成一个属性，而不是一个函数，然后它会自动变成响应式的。