Manually refresh a node

Hello there,
I use GoJS on Vue.

diagram.model = go (TreeModel, {nodeKeyProperty: 'id'})
diagram.model.nodeDataArray = data

Now my requirement is to be able to update to the node by directly modifying the data. Don’t ask me why. When I use model.setDataProperty (node, key, value) it doesn’t work. Because the data is already up-to-date.

OK, if you want to directly modify the properties of a node data object, i.e. without calling Model.setDataProperty, then you can call Part.updateTargetBindings on the corresponding Node. Part | GoJS API
You will need to call this method, perhaps once for each of several nodes, within a transaction. If you are changing most of the nodes, you could instead call Diagram.updateAllTargetBindings on the Diagram.
Diagram | GoJS API

BUT please realize that by setting the properties directly there will be no record of any previous value(s), the user will not be able to undo or redo those changes.

For a general discussion, please read the Introduction page about models starting at GoJS Using Models -- Northwoods Software.

OK, Thank you!

Because I need to implement undomanager myself.

Not work for data.push(item)

That should work. I just tried it in two different apps. Here’s the simpler one I just created to demonstrate it:

<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://unpkg.com/gojs"></script>
<script id="code">
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          "undoManager.isEnabled": true,
          "ModelChanged": function(e) {     // just for demonstration purposes,
            if (e.isTransactionFinished) {  // show the model data in the page's TextArea
              document.getElementById("mySavedModel").textContent = e.model.toJson();
            }
          }
        });

    myDiagram.nodeTemplate =
      $(go.Node, "Vertical",
        $(go.Panel, "Auto",
          $(go.Shape,
            { fill: "white" },
            new go.Binding("fill", "color")),
          $(go.Panel, "Vertical",
            { margin: 8 },
            new go.Binding("itemArray", "items"))
        ),
        $(go.TextBlock,
          new go.Binding("text"))
      );

    myDiagram.model = new go.GraphLinksModel(
    [
      {
        key: 1, text: "Alpha", color: "lightblue",
        items: ["alpha-lipoic", "beta-carotene", "gamma-tocopherol"] }
    ]);
  }

  function test() {
    myDiagram.commit(function(d) {
      var n = d.findNodeForKey(1);
      n.data.items.push("d");
      n.updateTargetBindings("items");
    });
  }
</script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <button onclick="test()">Test</button>
  Clicking the "Test" button will push a string onto the one node data's "items" Array.
  But an undo will not undo that change in the model.
  <textarea id="mySavedModel" style="width:100%;height:250px"></textarea>
</body>
</html>

Thank you,
I mean nodeDataArray.push, not nodeDataArray [index] .push

Ah, that is different. Call Diagram | GoJS API

Thank you very much!