1

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

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

  <div id="app">  
    <div class="columns is-v-centered">
    <div class="column is-5">
    <h2 class="help">Use <span class="tag">_keyword</span> tag to dynamically replace your keyword</h2>
    <div v-for="(ad, index) in ads" :key="index">
    <div v-if="ads[index]['boolean'] == true">
      <div class="form-inputs">
        <label class="label is-capitalized">Headline One</label>
        <div class="field">
          <div class="control is-expanded">
            <input type="text" class="input" v-model="ad.headline1" placeholder="Leave empty to skip this!">
          </div>
        </div>
      </div>
      <div class="form-inputs">
        <label class="label is-capitalized">Headline Two </label>
        <div class="field">
          <div class="control is-expanded">
            <input type="text" class="input" v-model="ad.headline2" placeholder="headline 2">
          </div>
        </div>
      </div>
      <div class="form-inputs">
        <label class="label is-capitalized">Headline Three </label>
        <div class="field">
          <div class="control is-expanded">
            <input type="text" class="input" v-model="ad.headline3" placeholder="healdine 3">
          </div>
        </div>
      </div>
      <div class="form-inputs">
        <label class="label is-capitalized">Description One </label>
        <div class="field">
          <div class="control is-expanded">
            <input type="text" class="input" v-model="ad.desc1" placeholder="description one">
          </div>
        </div>
      </div>
      <div class="form-inputs">
        <label class="label is-capitalized">Description Two </label>
        <div class="field">
          <div class="control is-expanded">
            <input type="text" class="input" v-model="ad.desc2" placeholder="description two">
          </div>
        </div>
      </div>
      <div class="form-inputs">
        <label class="label is-capitalized">Final URL </label>
        <div class="field">
          <div class="control is-expanded">
            <input type="text" class="input" v-model="ad.finalurl" placeholder="www.books.com">
          </div>
        </div>
      </div>
      <div class="form-inputs">
        <label class="label is-capitalized">Path One </label>
        <div class="field">
          <div class="control is-expanded">
            <input type="text" class="input" v-model="ad.path1" placeholder="path1">
          </div>
        </div>
      </div>
      <div class="form-inputs">
        <label class="label is-capitalized">Path Two </label>
        <div class="field">
          <div class="control is-expanded">
            <input type="text" class="input" v-model="ad.path2" placeholder="path2">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="column is-2">

</div>
<div class="column is-5">
  <div class="field is-grouped is-grouped-right has-addons">
    <a id="blue-button-theme" class="button is-fullwidth" @click="newAd()">Create new ad</a>


  </div>
  <p class="help">Click on an ad and edit the values in the form. Your changes will be applied to all ad sets automatically.</p>
  <br>
  <div class="box ad-box" v-for="(ad, index) in ads" :key="index"@click="hideInput(index)">
    <div>
      <span> text| </span>
      <span class="icon is-pulled-right has-text-grey-light has-text-weight-light" @click="deleteAd()">
        <span v-if="ad.boolean">
          <p class="">X</p>
        </span>
      </span>
      <br>
      <span class="is-size-7 is-grey">{{ad.headline1}} </span>
    </div>
    <br>
  </div>
</div>

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

4

1 回答 1

2

这是一个似乎有效的版本。我做了两件事：

  • 抛弃了for- 无需浏览所有广告。您只对要删除的那个感兴趣
  • 并设置boolean为 true on $nextTick()。
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;
    }
  });
},

更新了笔。

顺便说一句，您遇到的另一个问题是您的newAd()功能当前要求您的组件至少有 1 个广告。我还没修好。您可能希望实现一个可以从头开始制作新广告的广告界面。

于 2019-01-28T09:25:19.090 回答