Question

所以我有两列，第一列是输入，第二列是用户在一个框中输入的输出。我可以通过单击按钮来添加功能，效果很好，但是我也希望能够删除带有X图标的所选框，如当前显示的那样。当我单击X图标删除该框时，我希望出现前一个框的输入表单，但是直到我单击该框时，它才会出现。

我最初在for循环外的按钮上具有delect功能，它工作正常，但需要与X图标一起使用，现在遇到了这些问题。我已经用代码设置了一个Codepen

a:5:{s:11:"header_dark";s:7:"#333E4B";s:12:"header_light";s:7:"#f05a28";s:10:"text_color";s:7:"#ffffff";s:9:"text_dark";s:7:"#ffffff";s:18:"notification_color";s:7:"#ff0000";}

https://codepen.io/luis4flames/pen/KJzrjb?editors=1010

Answer 1

这似乎很有效。我做了两件事：

转储了for-无需浏览所有广告。您只对要删除的那个感兴趣
并在$nextTick()上将boolean设置为true。

deleteAd(){
  let index = this.ads.findIndex(_a => _a.boolean);
  this.ads.splice(index, 1);
  this.$nextTick().then(() => {
    if (this.ads.length) {
      this.ads[Math.min(index, this.ads.length - 1)]["boolean"] = true;
    }
  });
},

Updated pen。

顺便说一句，您遇到的另一个问题是newAd()函数目前需要您的组件至少包含1个广告。我还没有解决。您可能想要实现一个可以从头开始制作新广告的广告界面。

V-如果不对状态变化做出反应

1 个答案: