javascript - D3 V4 : Updated data is being seen as new data?(更新功能)-6ren

javascript - D3 V4 : Updated data is being seen as new data?(更新功能)

转载作者：太空狗更新时间：2023-10-29 14:18:39

目前正在搭建系统，更新功能遇到了一些问题。

本质上，我正在尝试向 D3 树添加新节点。当用户点击一个节点的“添加按钮”时，可以添加一个新的子节点。每个添加按钮都可以在每个节点的左侧找到。

我关注了 Mike Bostock 的 general update pattern .单击按钮后，唯一的"new"数据元素应该是新创建的子节点，但看起来整个数据都被视为"new"。当我查看每个节点的类名时，我得出了这个结论，并且所有节点都有一个过渡到中心节点并消失的明显事实。其他原始数据应该“更新”，但事实并非如此。任何人都可以轻轻地指出为什么会这样吗？

可以在这个 jfiddle link 中找到我的代码的工作示例.

编辑 06/09

根据 Gordon 的建议，我为我的节点和链接找到了一个唯一字段。因此，为了唯一标识数据，我做了以下更改:

节点

.data(d, d => d.data.name)

链接

.data(d, d => d.source.data.name)

此更改(大部分)有效，但我看到一些奇怪的行为仍在发生:(1) Branch 7.2.1 仍被识别为新节点并消失； (2) 在第二次“添加”左右之后，链接没有与它们各自的节点正确对齐。我认为我的两个小编辑正在影响这一点，因为当我回到原始代码时，线条被正确绘制，尽管它们正在过渡。想法？有什么建议吗？

HTML

  <div id="div-mindMap">

CSS

.linkMindMap {
    fill: none;
    stroke: #555;
    stroke-opacity: 0.4;
}    
rect {
    fill: white;
    stroke: #3182bd;
    stroke-width: 1.5px;  
 }

const widthMindMap = 700;
const heightMindMap = 700;
let parsedData;

let parsedList = {
  "name": " Stapler",
  "children": [{
      "name": " Bind",
      "children": []
    },
    {
      "name": "   Nail",
      "children": []
    },
    {
      "name": "   String",
      "children": []
    },
    {
      "name": " Glue",
      "children": [{
          "name": "Gum",
          "children": []
        },
        {
          "name": "Sticky Gum",
          "children": []
        }
      ]
    },
    {
      "name": " Branch 3",
      "children": []
    },
    {
      "name": " Branch 4",
      "children": [{
          "name": "   Branch 4.1",
          "children": []
        },
        {
          "name": "   Branch 4.2",
          "children": []
        },
        {
          "name": "   Branch 4.1",
          "children": []
        }
      ]
    },
    {
      "name": " Branch 5",
      "children": []
    },
    {
      "name": " Branch 6",
      "children": []
    },
    {
      "name": " Branch 7",
      "children": []
    },
    {
      "name": "   Branch 7.1",
      "children": []
    },
    {
      "name": "   Branch 7.2",
      "children": [{
          "name": "   Branch 7.2.1",
          "children": []
        },
        {
          "name": "   Branch 7.2.1",
          "children": []
        }
      ]
    }
  ]
}


let svgMindMap = d3.select('#div-mindMap')
  .append("svg")
  .attr("id", "svg-mindMap")
  .attr("width", widthMindMap)
  .attr("height", heightMindMap);


let backgroundLayer = svgMindMap.append('g')
  .attr("width", widthMindMap)
  .attr("height", heightMindMap)
  .attr("class", "background")

let gLeft = backgroundLayer.append("g")
  .attr("transform", "translate(" + widthMindMap / 2 + ",0)")
  .attr("class", "g-left");
let gLeftLink = gLeft.append('g')
  .attr('class', 'g-left-link');
let gLeftNode = gLeft.append('g')
  .attr('class', 'g-left-node');


function loadMindMap(parsed) {
  var data = parsed;
  var split_index = Math.round(data.children.length / 2);

  parsedData = {
    "name": data.name,
    "children": JSON.parse(JSON.stringify(data.children.slice(split_index)))
  };

  var left = d3.hierarchy(parsedData, d => d.children);

  drawLeft(left, "left");
}

// draw single tree
function drawLeft(root, pos) {
  var SWITCH_CONST = 1;
  if (pos === "left") SWITCH_CONST = -1;

  update(root, SWITCH_CONST);
}

function update(source, SWITCH_CONST) {
  var tree = d3.tree()
    .size([heightMindMap, SWITCH_CONST * (widthMindMap - 150) / 2]);
  var root = tree(source);

  console.log(root)

  var nodes = root.descendants();
  var links = root.links();

  console.log(nodes)
  console.log(links)
  // Set both root nodes to be dead center vertically
  nodes[0].x = heightMindMap / 2

  //JOIN new data with old elements
  var link = gLeftLink.selectAll(".link-left")
    .data(links, d => d)
    .style('stroke-width', 1.5);

  var linkEnter = link.enter().append("path")
    .attr("class", "linkMindMap link-left")
    .attr("d", d3.linkHorizontal()
      .x(d => d.y)
      .y(d => d.x));

  var linkUpdate = linkEnter.merge(link);

  linkUpdate.transition()
    .duration(750)
  var linkExit = link.exit()
    .transition()
    .duration(750)
    .attr('x1', function(d) {
      return root.x;
    })
    .attr('y1', function(d) {
      return root.y;
    })
    .attr('x2', function(d) {
      return root.x;
    })
    .attr('y2', function(d) {
      return root.y;
    })
    .remove();

  //JOIN new data with old elements
  var node = gLeftNode.selectAll(".nodeMindMap-left")
    .data(nodes, d => d);

  console.log(nodes);


  //ENTER new elements present in new data
  var nodeEnter = node.enter().append("g").merge(node)
    .attr("class", function(d) {
      return "nodeMindMap-left " + "nodeMindMap" + (d.children ? " node--internal" : " node--leaf");
    })
    .classed("enter", true)
    .attr("transform", function(d) {
      return "translate(" + d.y + "," + d.x + ")";
    })
    .attr("id", function(d) {
      let str = d.data.name;
      str = str.replace(/\s/g, '');
      return str;
    });

  nodeEnter.append("circle")
    .attr("r", function(d, i) {
      return 2.5
    });

  var addLeftChild = nodeEnter.append("g")
    .attr("class", "addHandler")
    .attr("id", d => {
      let str = d.data.name;
      str = "addHandler-" + str.replace(/\s/g, '');
      return str;
    })
    .style("opacity", "1")
    .on("click", (d, i, nodes) => addNewLeftChild(d, i, nodes));

  addLeftChild.append("line")
    .attr("x1", -74)
    .attr("y1", 1)
    .attr("x2", -50)
    .attr("y2", 1)
    .attr("stroke", "#85e0e0")
    .style("stroke-width", "2");

  addLeftChild.append("rect")
    .attr("x", "-77")
    .attr("y", "-7")
    .attr("height", 15)
    .attr("width", 15)
    .attr("rx", 5)
    .attr("ry", 5)
    .style("stroke", "#444")
    .style("stroke-width", "1")
    .style("fill", "#ccc");

  addLeftChild.append("line")
    .attr("x1", -74)
    .attr("y1", 1)
    .attr("x2", -65)
    .attr("y2", 1)
    .attr("stroke", "#444")
    .style("stroke-width", "1.5");

  addLeftChild.append("line")
    .attr("x1", -69.5)
    .attr("y1", -3)
    .attr("x2", -69.5)
    .attr("y2", 5)
    .attr("stroke", "#444")
    .style("stroke-width", "1.5");

  // .call(d3.drag().on("drag", dragged));;

  nodeEnter.append("foreignObject")
    .style("fill", "blue")
    .attr("x", -50)
    .attr("y", -7)
    .attr("height", "20px")
    .attr("width", "100px")
    .append('xhtml:div')
    .append('div')
    .attr("class", 'clickable-node')
    .attr("id", function(d) {
      let str = d.data.name;
      str = "div-" + str.replace(/\s/g, '');
      return str;
    })
    .attr("ondblclick", "this.contentEditable=true")
    .attr("onblur", "this.contentEditable=false")
    .attr("contentEditable", "false")
    .style("text-align", "center")
    .text(d => d.data.name);

  //TODO: make it dynamic
  nodeEnter.insert("rect", "foreignObject")
    .attr("ry", 6)
    .attr("rx", 6)
    .attr("y", -10)
    .attr("height", 20)
    .attr("width", 100)
    // .filter(function(d) { return d.flipped; })
    .attr("x", -50)
    .classed("selected", false)
    .attr("id", function(d) {
      let str = d.data.name;
      str = "rect-" + str.replace(/\s/g, '');
      return str;
    });

  var nodeUpdate = nodeEnter.merge(node);
  // Transition to the proper position for the node
  nodeUpdate.transition()
    .duration(750)
    .attr("transform", function(d) {
      return "translate(" + d.y + "," + d.x + ")";
    });

  // Remove any exiting nodes
  var nodeExit = node.exit()
    .transition()
    .duration(750)
    .attr("transform", function(d) {
      return "translate(" + source.y + "," + source.x + ")";
    })
    .remove();

  // On exit reduce the node circles size to 0
  nodeExit.select('circle').attr('r', 0);
  // node = nodeEnter.merge(node)
}

function addNewLeftChild(d, i, nodes) {
  console.log("make new child");
  event.stopPropagation();
  var newNodeObj = {
    // name: new Date().getTime(),
    name: "New Child",
    children: []
  };

  console.log("this is ", parsedData)
  //Creates new Node
  var newNode = d3.hierarchy(newNodeObj);
  newNode.depth = d.depth + 1;
  newNode.height = d.height - 1;
  newNode.parent = d;
  newNode.id = Date.now();

  console.log(newNode);
  console.log(d)

  if (d.data.children.length == 0) {
    console.log("i have no children")
    d.children = []
  }
  d.children.push(newNode)
  d.data.children.push(newNode.data)

  console.log(d)
  let foo = d3.hierarchy(parsedData, d => d.children) 
  drawLeft(foo, "left");
}


loadMindMap(parsedList);

最佳答案

有几件事正在发生:

使用唯一键

使用名称不是键的最佳选择，因为每个新节点都有相同的名称(“新子节点”)。相反，最好使用某种 ID 系统。这是一个使用 ID 标记每个节点的数据的快速函数。

let currNodeId = 0;
function idData(node) {
  node.nodeId = ++currNodeId;
  node.children.forEach(idData);
}
idData(parsedList);

并且由于您正在重新定义 parsedData 中的数据，因此您也需要在那里使用 id 属性:

  parsedData = {
    "name": data.name,
    "nodeId": data.nodeId,
    "children": JSON.parse(JSON.stringify(data.children.slice(split_index)))
  };

添加新节点时，也可以在nodeData中设置:

  var newNodeObj = {
    // name: new Date().getTime(),
    name: "New Child",
    nodeId: ++currNodeId,
    children: []
  };

然后实际使用 .nodeId 作为节点的键，将它用作键函数:

    .data(nodes, d => d.data.nodeId);

对于链接，您应该使用 target 而不是 source，因为这是一棵树并且每个 child 只有一个链接(而不是一个有多个链接 parent )。

    .data(nodes, d => d.target.data.nodeId);

防止添加多个节点元素

还有一个问题是在添加新元素之前合并新旧节点。为防止这种情况，您应该更改

node.enter().append("g").merge(node)

到:

node.enter().append("g")

链接转换

最后，您的链接的转换不会随节点一起转换。要使它们过渡，请移动:

    .attr("d", d3.linkHorizontal()
      .x(d => d.y)
      .y(d => d.x));

在下面

  linkUpdate.transition()
    .duration(750)

所有内容看起来像这样:https://jsfiddle.net/v9wyb6q4/

或者:

const widthMindMap = 700;
const heightMindMap = 700;
let parsedData;

let parsedList = {
  "name": " Stapler",
  "children": [{
      "name": " Bind",
      "children": []
    },
    {
      "name": "   Nail",
      "children": []
    },
    {
      "name": "   String",
      "children": []
    },
    {
      "name": " Glue",
      "children": [{
          "name": "Gum",
          "children": []
        },
        {
          "name": "Sticky Gum",
          "children": []
        }
      ]
    },
    {
      "name": " Branch 3",
      "children": []
    },
    {
      "name": " Branch 4",
      "children": [{
          "name": "   Branch 4.1",
          "children": []
        },
        {
          "name": "   Branch 4.2",
          "children": []
        },
        {
          "name": "   Branch 4.1",
          "children": []
        }
      ]
    },
    {
      "name": " Branch 5",
      "children": []
    },
    {
      "name": " Branch 6",
      "children": []
    },
    {
      "name": " Branch 7",
      "children": []
    },
    {
      "name": "   Branch 7.1",
      "children": []
    },
    {
      "name": "   Branch 7.2",
      "children": [{
          "name": "   Branch 7.2.1",
          "children": []
        },
        {
          "name": "   Branch 7.2.1",
          "children": []
        }
      ]
    }
  ]
}
let currNodeId = 0;
function idData(node) {
	node.nodeId = ++currNodeId;
  node.children.forEach(idData);
}
idData(parsedList);

let svgMindMap = d3.select('#div-mindMap')
  .append("svg")
  .attr("id", "svg-mindMap")
  .attr("width", widthMindMap)
  .attr("height", heightMindMap);


let backgroundLayer = svgMindMap.append('g')
  .attr("width", widthMindMap)
  .attr("height", heightMindMap)
  .attr("class", "background")

let gLeft = backgroundLayer.append("g")
  .attr("transform", "translate(" + widthMindMap / 2 + ",0)")
  .attr("class", "g-left");
let gLeftLink = gLeft.append('g')
  .attr('class', 'g-left-link');
let gLeftNode = gLeft.append('g')
  .attr('class', 'g-left-node');


function loadMindMap(parsed) {
  var data = parsed;
  var split_index = Math.round(data.children.length / 2);

  parsedData = {
    "name": data.name,
    "nodeId": data.nodeId,
    "children": JSON.parse(JSON.stringify(data.children.slice(split_index)))
  };

  var left = d3.hierarchy(parsedData, d => d.children);

  drawLeft(left, "left");
}

// draw single tree
function drawLeft(root, pos) {
  var SWITCH_CONST = 1;
  if (pos === "left") SWITCH_CONST = -1;

  update(root, SWITCH_CONST);
}

function update(source, SWITCH_CONST) {
  var tree = d3.tree()
    .size([heightMindMap, SWITCH_CONST * (widthMindMap - 150) / 2]);
  var root = tree(source);

  console.log(root)

  var nodes = root.descendants();
  var links = root.links();

  console.log(nodes)
  console.log(links)
  // Set both root nodes to be dead center vertically
  nodes[0].x = heightMindMap / 2

  //JOIN new data with old elements
  var link = gLeftLink.selectAll(".link-left")
    .data(links, d => d.target.data.nodeId)
    .style('stroke-width', 1.5);

  var linkEnter = link.enter().append("path")
    .attr("class", "linkMindMap link-left");

  var linkUpdate = linkEnter.merge(link);

  linkUpdate.transition()
    .duration(750)
    .attr("d", d3.linkHorizontal()
      .x(d => d.y)
      .y(d => d.x));
  var linkExit = link.exit()
    .transition()
    .duration(750)
    .attr('x1', function(d) {
      return root.x;
    })
    .attr('y1', function(d) {
      return root.y;
    })
    .attr('x2', function(d) {
      return root.x;
    })
    .attr('y2', function(d) {
      return root.y;
    })
    .remove();

  //JOIN new data with old elements
  var node = gLeftNode.selectAll(".nodeMindMap-left")
    .data(nodes, d => d.data.nodeId);

  console.log(nodes);

  
  //ENTER new elements present in new data
  var nodeEnter = node.enter().append("g")
    .attr("class", function(d) {
      return "nodeMindMap-left " + "nodeMindMap" + (d.children ? " node--internal" : " node--leaf");
    })
    .classed("enter", true)
    .attr("transform", function(d) {
      return "translate(" + d.y + "," + d.x + ")";
    })
    .attr("id", function(d) {
      let str = d.data.name;
      str = str.replace(/\s/g, '');
      return str;
    });

  nodeEnter.append("circle")
    .attr("r", function(d, i) {
      return 2.5
    });

  var addLeftChild = nodeEnter.append("g")
    .attr("class", "addHandler")
    .attr("id", d => {
      let str = d.data.name;
      str = "addHandler-" + str.replace(/\s/g, '');
      return str;
    })
    .style("opacity", "1")
    .on("click", (d, i, nodes) => addNewLeftChild(d, i, nodes));

  addLeftChild.append("line")
    .attr("x1", -74)
    .attr("y1", 1)
    .attr("x2", -50)
    .attr("y2", 1)
    .attr("stroke", "#85e0e0")
    .style("stroke-width", "2");

  addLeftChild.append("rect")
    .attr("x", "-77")
    .attr("y", "-7")
    .attr("height", 15)
    .attr("width", 15)
    .attr("rx", 5)
    .attr("ry", 5)
    .style("stroke", "#444")
    .style("stroke-width", "1")
    .style("fill", "#ccc");

  addLeftChild.append("line")
    .attr("x1", -74)
    .attr("y1", 1)
    .attr("x2", -65)
    .attr("y2", 1)
    .attr("stroke", "#444")
    .style("stroke-width", "1.5");

  addLeftChild.append("line")
    .attr("x1", -69.5)
    .attr("y1", -3)
    .attr("x2", -69.5)
    .attr("y2", 5)
    .attr("stroke", "#444")
    .style("stroke-width", "1.5");

  // .call(d3.drag().on("drag", dragged));;

  nodeEnter.append("foreignObject")
    .style("fill", "blue")
    .attr("x", -50)
    .attr("y", -7)
    .attr("height", "20px")
    .attr("width", "100px")
    .append('xhtml:div')
    .append('div')
    .attr("class", 'clickable-node')
    .attr("id", function(d) {
      let str = d.data.name;
      str = "div-" + str.replace(/\s/g, '');
      return str;
    })
    .attr("ondblclick", "this.contentEditable=true")
    .attr("onblur", "this.contentEditable=false")
    .attr("contentEditable", "false")
    .style("text-align", "center")
    .text(d => d.data.name);

  //TODO: make it dynamic
  nodeEnter.insert("rect", "foreignObject")
    .attr("ry", 6)
    .attr("rx", 6)
    .attr("y", -10)
    .attr("height", 20)
    .attr("width", 100)
    // .filter(function(d) { return d.flipped; })
    .attr("x", -50)
    .classed("selected", false)
    .attr("id", function(d) {
      let str = d.data.name;
      str = "rect-" + str.replace(/\s/g, '');
      return str;
    });

  var nodeUpdate = nodeEnter.merge(node);
  // Transition to the proper position for the node
  nodeUpdate.transition()
    .duration(750)
    .attr("transform", function(d) {
      return "translate(" + d.y + "," + d.x + ")";
    });

  // Remove any exiting nodes
  var nodeExit = node.exit()
    .transition()
    .duration(750)
    .attr("transform", function(d) {
      return "translate(" + source.y + "," + source.x + ")";
    })
    .remove();

  // On exit reduce the node circles size to 0
  nodeExit.select('circle').attr('r', 0);
  // node = nodeEnter.merge(node)
}

function addNewLeftChild(d, i, nodes) {
  console.log("make new child");
  event.stopPropagation();
  var newNodeObj = {
    // name: new Date().getTime(),
    name: "New Child",
    nodeId: ++currNodeId,
    children: []
  };
  
  console.log("this is ", parsedData)
  //Creates new Node
  var newNode = d3.hierarchy(newNodeObj);
  newNode.depth = d.depth + 1;
  newNode.height = d.height - 1;
  newNode.parent = d;
  newNode.id = Date.now();

  console.log(newNode);
  console.log(d)

  if (d.data.children.length == 0) {
    console.log("i have no children")
    d.children = []
  }
  d.children.push(newNode)
  d.data.children.push(newNode.data)

  console.log(d)
  let foo = d3.hierarchy(parsedData, d => d.children) 
  drawLeft(foo, "left");
}


loadMindMap(parsedList);

.linkMindMap {
    fill: none;
    stroke: #555;
    stroke-opacity: 0.4;
}    
rect {
    fill: white;
    stroke: #3182bd;
    stroke-width: 1.5px;  
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
  <div id="div-mindMap">

关于javascript - D3 V4 : Updated data is being seen as new data?(更新功能)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56510419/

文章推荐： git - 可以通过提交添加私有(private)文件(未推送)吗？

文章推荐： android - Android 定时 Action

文章推荐： git - 如何创建与先前删除的 dev 分支同名的 git dev 分支？

文章推荐： git - 撤消 git rm -f [文件]

numpy - 为向量矩阵 v 计算 "v^T A v"
我有一个 k*n矩阵 X 和 k*k矩阵A。对于X的每一列，我想计算标量 X[:, i].T.dot(A).dot(X[:, i]) (或者，数学上， Xi' * A * Xi )。目前，我有一个
c - 无效*v[]； v[i] = v[j]；为什么这是对的？
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
javascript - VueJS - 如何注册自定义元素、、、
我是 VueJS 的新手。我已经使用 vuetify/webpack-ssr 模板创建了一个项目，现在我想创建一个登录页面，但是没有显示表单，控制台给了我以下信息: [Vue warn]: Unkno
c++ - 是否保证 C++ vector v 的 v.begin() + v.size() == v.end()？
我尝试将 value 插入到 C++ vector v 之前的第 i 元素(或元素 (i-1) 之后) )。代码很简单 v.insert(v.begin() + i, value); 我确信当 i 介
c++ - vector v 的 v[0]、v.begin() 和 v.data() 之间有什么区别？
我需要显示使用合并排序算法排序的 vector 。然而，当我使用 v.begin() 时，我的 friend 使用 v.data() 来传递 vector 。他的代码运行良好，而我的却不行。请解释。
ffmpeg - 过滤图描述中的流说明符 ':v:0' [1 :v:0] [1:a:0] [2:v:0] [2:a:0] [3:v:0] [3:v:0] concat=n=4:v=1:a=1 [v] [a] matches no streams
这是我的命令(url1、url2、url3、url4 是占位符): ffmpeg -i url1 -i url2 -i url3 -i url4 -filter_complex “[1:v:0] [1
javascript - Vue : Use data to control DOM (but v-for, v-if、v-model 和 v-show 还不够)
我以前用过Vue，我知道怎么用v-for渲染元素序列，v-if或v-show有条件地显示元素，并且 v-model例如，控制段落的内容。但现在我需要对 DOM 进行更精细的控制: 我有一个range
rust - 为什么 &v[1] + &v[2] 与 Rust 中的 v[1] + v[2] 具有相同的结果？
我正在学习所有权和借用。 borrow1 和borrow2 的区别在于在borrow2 打印时使用了&: fn borrow1(v: &Vec) { println!("{}", &v[10]
vuejs2 - v-for 内部的 v-if 和 v-else 用于不同的文本渲染
我找不到一种方法来选择不同的选项来渲染 v-for 中的文本。是否有可能或者我是否需要以不同的方式构建逻辑来执行类似于下面的代码的操作？ // i
oop - 为什么 Seq[V] 不扩展 Map[Int,V] 也不 Set[V] 扩展 Map[V,Bool]？
Iterable 的三个直接子类型是 Map , Seq , 和 Set .除了性能问题之外，似乎还有一个 Seq是从整数到值的映射，以及 Set是从值到 bool 值的映射(如果值在集合中，则为 t
java - 为什么 v != null ？ v++ : 1 is not the same as (v ! = 空？ v : 0) + 1 on incrementing a key on HashMap. 计算？
我想应用一个计算方法，如果键存在则增加值，否则将 1。有 Map map = new HashMap<>(); 我不明白为什么 for (int i = 0; i v != null ? v++ :
c - IEEE 754 : is v *= -1 always guaranteed to be the same as v = -v?
标准(IEEE 754/C)是否保证以下代码断言永远不会失败？ int main() { for ( /* all possible float / double values */ )
javascript - v-for 在 v-if 条件下，v-else 不起作用，循环重复
代码由Vue语言编写，使用Element-ui框架，如果一个对象包含某些内容，则会显示该内容，如果不包含则禁用菜单按钮。输出应该是这样的: a、b(禁用)、c、d、e 但我的是这样的: a、a(禁
vue.js - v-for 与 v-if 处于同一级别，影响 v-else
如果我这样做: {‌{ morevalue }} {‌{ value }} v-else 中的跨度也会在第二个 V-FOR 上循环，即使它上面没有任何 v-for，为什么？这是
vue.js - v-for 与 v-if 处于同一级别，影响 v-else
如果我这样做: {‌{ morevalue }} {‌{ value }} v-else 中的跨度也会在第二个 V-FOR 上循环，即使它上面没有任何 v-for，为什么？这是
javascript - 如何在 v-datatable 中使用带有动态数组的 v-switches v-model
我将 Vue.js 与 Vuetify 一起使用，我正在尝试使用 v-data-table 从后端加载菜单列表并使用对其设置一些权限v-switches 但我在尝试 v-model 数组时遇到问题:
java - Map 在按值分组后返回到 Map>，而不是 Map>>
我在 Java 的流式操作中努力维护我想要的数据结构，这很可能是由于缺乏正确的理解和实践。 public class Main { public static void main(String
javascript - 是 incorrect? 我可以在同一元素的 v-bind 中使用来自 v-for 的匹配项吗？
我正在尝试为匹配中的每个匹配呈现一些 HTML，但是，我不太确定实际上是正确的。更具体地说，我不确定我是否可以使用 v-bind:match='match'在与循环相同的元素上 v-for='ma
vue.js - 带有选择选项的 V-IF 和 V-for 循环条件似乎永远不会进入 v-else 语句
所以我想知道为什么这个 v-if 和 v-else 语句不起作用，为什么我要以不同的方式解决它。代码如下 Required: Select a Workflow {{ isChain ?
vuejs2 - 防止 v-if、v-else、v-else-if 中的相同组件标签共享一个 Vue 实例
我有一个 VueJS 组件，我在同一个模板中使用了两次来显示两组不同的数据。每个都显示在自己的使用 v-if 切换的容器在导航选项卡上。似乎这些组件被实例化为同一个实例。我调用 console

太空狗

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城