vue.js - Vue 状态不与 kendo 数据源同步

问题描述

我有一个kendo 包装网格，其中本地kendo 数据源指向vue state。有一个“更新”按钮将更新状态，以便网格也将更新并且它可以工作。

但是，如果我首先单击按钮“测试”（只是对状态进行相同的赋值）然后单击“更新”，奇怪的是它不起作用，所以网格没有变化。

我终于发现原因是单击“测试”然后“更新”后，vue 状态更新但剑道网格数据源不会（意外不同步）。现在临时解决方案是我必须手动将状态分配给数据源，以便更新网格。

我的问题是，为什么在单击“测试”后，剑道网格数据源被缓存并且与 vue 状态不同步？如果我不点击“测试”，它们总是会同步。仅当对状态进行“相同的值分配”时才会出现问题。如果“不同的赋值”，没问题。

<div id="vueapp">
    <kendo-datasource ref="dsDS" :data="localDataSource"></kendo-datasource>
    <kendo-grid :data-source-ref="'dsDS'">
        <kendo-grid-column :field="'ProductID'"
                           :title="'ID'"
                           :width="40"></kendo-grid-column>
        <kendo-grid-column :field="'ProductName'"></kendo-grid-column>
        <kendo-grid-column :field="'UnitPrice'"
                           :title="'Unit Price'"
                           :width="120"
                           :format="'{0:c}'"></kendo-grid-column>
        <kendo-grid-column :field="'UnitsInStock'"
                           :title="'Units In Stock'"
                           :width="120"></kendo-grid-column>
        <kendo-grid-column :field="'Discontinued'" :width="120"></kendo-grid-column>
    </kendo-grid>
    <input type="button" value="Test" @click="test" />
    <input type="button" value="Update" @click="update" />
</div>

new Vue({
    el: '#vueapp',
    data: {
        localDataSource: [{
                "ProductID": 1,
                "ProductName": "Chai",
                "UnitPrice": 18,
                "UnitsInStock": 39,
                "Discontinued": false,
            },
            {
                "ProductID": 2,
                "ProductName": "Chang",
                "UnitPrice": 17,
                "UnitsInStock": 40,
                "Discontinued": false,
            },
            {
                "ProductID": 3,
                "ProductName": "Aniseed Syrup",
                "UnitPrice": 10,
                "UnitsInStock": 13,
                "Discontinued": false,
            }
        ]
    },
    methods: {
      test: function(e) {
        this.localDataSource = JSON.parse(JSON.stringify(this.localDataSource)); //same value assignment
        console.log('test');
      },
      update: function(e) {
        this.localDataSource.splice(0, 1, this.localDataSource[1]); //replace the first object with second object
      },
    }
})

更新：

让我在下面强调我的问题：

为什么 test2() + update() => 有效！

但是 test() + update() => 不工作

它们的不同之处只是 test2() 的值分配“你好”

methods: {
    test: function(e) { //same value assignment
        let ds = JSON.parse(JSON.stringify(this.localDataSource));
        this.localDataSource = JSON.parse(JSON.stringify(ds));
    },
    test2: function(e) { //different value assignment
        let ds = JSON.parse(JSON.stringify(this.localDataSource));
        ds[0]['ProductName'] = 'hello';
        this.localDataSource = JSON.parse(JSON.stringify(ds));
    },
    update: function(e) {
        this.localDataSource.splice(0, 1, this.localDataSource[1]); //replace first row with second row
    }
}

http://dojo.telerik.com/aGENIHuW/10

标签： vue.jskendo-uikendo-gridkendo-datasource

一旦在 data() 对象中设置了数据源，并且绑定了剑道网格，我就不会尝试编辑 localDataSource 对象。剑道网格获取您的基本数组并将其转换为具有所有扩展属性的剑道数据源，因此我将针对该新对象进行更改。

在您的更新方法中尝试以下类似的方法 - 如果您可以通过包装器属性为网格分配一个 id，那么选择器会比我这里的更好

    let gridDS = $("div[data-role=grid]").data("kendoGrid").dataSource;
    let data = gridDS.data();
    data.splice(0,1,data[1]);

顺便说一句，数据方法应该返回一个新对象，否则您可能会遇到重复组件共享同一对象的问题，而不是

    data:{
        localDataSource:[1,2,3]
    }

我会做

    data(){
        return {
            localDataSource:[1,2,3]
        }
    }

vue.js - Vue 状态不与 kendo 数据源同步

问题描述

解决方案

推荐阅读