butterfly vue版本，edge的render重写。数据更新后界面未更新。

The current behavior

nodes内更新数据，界面可以更新，deges更新数据界面未更新

The expected behavior

Your environment(such as: Butterfly version、Browser version、OS and so on)

Butterfly version: "butterfly-dag": "^5.1.0-beta.2", "butterfly-vue": "^1.0.20", Browser version:

OS: windows10

Steps To Reproduce, Maybe you can provide a simple demo.

nodes内更新数据，界面可以更新，deges更新数据界面未更新

Oct 31 '22 10:10 yuanbolin

@Zt448143356

Nov 02 '22 01:11 noonnightstorm

这是用法上的问题。这里涉及到vue2的更新渲染机制。你有空可以了解下vue2的更新渲染机制。

已知信息： edges是一个数组，

在vue2中，你去更新数组中的某一项参数，直接更新是无效的。数据变了但是不会触发渲染。

推荐你看下这几篇文章：（vue2的）

数组文章：https://segmentfault.com/a/1190000038142224 渲染机制文章： https://v2.cn.vuejs.org/v2/guide/reactivity.html

看完你应该就知道怎么写了。

Nov 03 '22 02:11 Zt448143356

@Zt448143356 这些文档学习vue时看过了,一开始就是按照vue的推荐语法更新,但实际与vue描述不符,渲染未生效. 目前采用的下标语法是参考贵插件的vue版的example中的nodes数组更新代码. 我自己开发时nodes数组也确实可以通过下标进行更新数据并触发渲染. 但edges未触发.

Nov 04 '22 01:11 yuanbolin

怎么可能，吓得我马上自己去写了一份。没有问题啊。兄弟你在看看,是我对vue2的数组更新的理解和你的理解有出入吗？

vue2的数组是重写了它的数组操作方法，你用重写的数组操作方法去操作数组就会触发vue的渲染机制的。你看看你的理解和我的一致不。那个第一篇文章就讲述了这个观点。

test

    addEdge() {
      this.mockData.edges.push({
        id: '1.right-4.right',
        sourceNode: '1',
        targetNode: '4',
        source: 'right',
        target: 'right',
      })
      this.addEdgeEnable = true;
    },
    editEdge() {
      this.mockData.edges.splice(0, 1, {
        id: '1.right-4.left',
        sourceNode: '1',
        targetNode: '4',
        source: 'right',
        target: 'left',
        render: '<div>编辑线</div>'
      })
    },