Question

我是Vue框架的新手。目前，我正在做一个小项目，可以在线创建和编辑有向图。我希望某些组件可以针对处于不同状态的事件采取不同的操作。

例如，对于图形节点的要求，如果应用程序处于编辑状态，则可以通过单击来选择该节点，但是如果该节点位于删除状态，点击，它将使其消失。此外，还有一些按钮可用来切换当前状态。

这是我的问题：我该如何以声明式，虚幻风格和简洁的方式解决此类问题？

P.S我的项目也使用D3.js，如果您的示例与此可视化框架集成在一起，那就更好了。

Answer 1

简单的解决方案：在您的数据中有一个名为editMode的属性，并在点击处理程序中进行检查：即：

<button @click="editMode?selectNode:deleteNode">Click Me</button>

其中selectNode和deleteNode是组件中的方法。

Answer 2

啊，我以前解决了同样的要求。

您可以将参数传递给事件函数，并确定事件函数的行为。

<button @click=“todo(type)”>MyBtn</button>

或

<button @click=“todo(‘edit’)”>edit</button>
<button @click=“todo(‘delete’)”>delete</button>

todo函数是这样的：

todo(type){
  if(type == “edit”){
    // do something 
    // also you can link to another function to make your codes clear like this :
    // this.editFunction();
  }
  if(type == “delete”){
    // do something 
  }
}

Vue组件在不同状态下如何表现不同？

2 个答案: