テーブルコンポーネントのデータ部分としてカスタム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;
}
}
通常、はい、VueのデータにはプレーンなJavaScriptオブジェクトを使用するのが最善です。
ただし、この場合、コードが機能しないのはそのためではありません。
まず、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/[email protected]"></script>
<div id="app">
<div v-for="row in source.rows()">
{{row}}
</div>
</div>のrows結果として返されるオブジェクトの関数として公開されていることに注意してくださいnew DataSource()。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加