Vue状态与kendo数据源不同步。

Question

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

但是，如果我首先单击"Test“按钮(只是向state分配相同的值)，然后单击"Update"，奇怪的是，它不能工作，因此网格没有任何更改。

我最终发现原因是在单击"Test“然后"Update”之后，vue状态更新了，但是kendo网格数据源不会(意外地失去同步)。现在，临时解决方案是，我必须手动将状态分配给数据源，以便更新网格。

存储库：http://dojo.telerik.com/aGENIHuW

我的问题是，为什么在单击“Test”之后，kendo网格数据源会被缓存，并且与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()的值赋值'hello‘。

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

Answer 1

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

在update方法中尝试如下所示--如果您可以通过包装器属性为网格分配一个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]
        }
    }

Answer 2

添加它作为回答，因为注释不能容纳这么多的文本：

如果在update()函数：console.table(this.localDataSource)之后执行数据转储，您将看到localDataSource数组被正确更新。但剑道电网没有意识到这一点。它仍然有自己的数据数组。如果您对kendo数据源执行相应的转储，您将看到它没有被同步。

   let gridDS = $("div[data-role=grid]").data("kendoGrid").dataSource;
   let data = gridDS.data();
   console.table(data);

我认为正在发生的事情是这样的--因为localDataSource是data()的属性，Vue观察到对其嵌套属性的任何更改。当它执行代码时，ds[0]['ProductName'] = 'hello' Vue获取更新，查找对象上的依赖项，并重新绑定kendo组件。