该功能的概述是创建文字广告的能力。左侧是活动广告的用户输入，右侧是广告的显示。用户可以创建仅将对象添加到数组的新广告。当广告多于2个时，将启用分页功能，一次仅显示2个广告，然后会显示一个新元素，以转到广告的第二页。点击广告即可使其处于“活动状态”，并在显示的广告中显示一个“ X”，以显示其活动状态，还可以通过单击“ X”将其删除。删除广告时，它将激活前一个广告。删除广告2，广告1就会生效。用户输入字段对应于活动的广告。
一切正常，但是当活动广告是唯一显示的广告时，即总共有3个广告，因此第2页仅显示1个广告。如果您删除一个广告，则代码由于某种原因而崩溃。只需将ad（object）布尔值设为“ true”即可将广告设置为活动状态。
该错误发生在deleteAd（）函数中，尤其是将广告设置为true的行。
这是我的代码：
<div id="ads" v-if="steps.step == 3" :change="setActiveKeyword">
<h2 class="headlines">Ads</h2>
<img src="images/1x/underscore.png" srcset="images/1x/underscore.png 1x, images/2x/underscore@2x.png 2x,
images/3x/underscore@3x.png 3x" alt="" >
<div class="size19 has-text-grey" style="padding-top: 20px;">Click on an ad and edit the values in the form. Your changes will be applied to all ad sets automatically. You can create up to 10 unique ads.</div>
<div class="size19 has-text-grey">Switch between the keywords featured in your ad sets with the dropdown below</div>
<br>
<div>
<div class="columns is-v-centered">
<div class="column is-5">
<h2 class=" size16 use-keyword">Use <span class="bold-weight size16 key"><em>_keyword</em></span> tag to dynamically replace your keyword</h2>
<div v-for="ad in newAds">
<div v-for="key in ad">
<div v-if="key['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 size19" v-model="key.headline1" placeholder="Leave empty to skip this!">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="column is-2">
</div>
<div class="column is-5">
<div id="newAd-Preview" class="columns">
<div id="newAd-Preview" class="column">
<a class="button newAd-button" @click="newAd()">Create new ad</a>
</div>
<div class="column">
<div class="field is-grouped is-grouped-right has-addons">
<div class="field is-grouped-right has-addons">
<div class="control preview-adgroup">
<div class="button is-link is-static" style="background-color: #eef3f7;">
Previewing ad group
</div>
</div>
<div class="control">
<div id="newAd-Preview" class="select">
<select v-model="activeKeyword">
<option v-for="option in options">
{{option}}
</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-for="(ad, index) in currentAds" @click="hideInput(ad)" v-cloak>
<div class="adsPreview">
<span> {{ currentAds[index]['headline1'].replace(/_keyword_/g, activeKeyword) }} | </span>
<span class="icon is-pulled-right has-text-grey-light has-text-weight-light" @click="deleteAd()">
<div v-show="ad.boolean">
<p class="is-marginless">X</p>
</div>
</span>
<br>
</div>
<br />
</div>
<nav class="pagination" role="navigation" aria-label="pagination">
<ul class="pagination-list">
<li v-for="p in Math.ceil(newAds[keywordIndex].length/2)">
<a class="pagination-link" :class="{'ad-page': adPage == p}" @click="adPage = p">{{p}}</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
JS
var app = new Vue({
el: '#app',
data: {
userInput: '',
activeIndex: '',
activeKeyword: '',
activeAd:[0,0],
adPage: 1,
perPage: 2,
newAds:[
[]
],
steps: {
step: 1,
}
},
methods: {
newAd() {
this.newAds[this.keywordIndex].push({
id: this.keywordIndex,
headline1: this.newAds[this.keywordIndex][0]['headline1'],
headline2: this.newAds[this.keywordIndex][0]['headline2'],
headline3: this.newAds[this.keywordIndex][0]['headline3'],
desc1: this.newAds[this.keywordIndex][0]['desc1'],
desc2: this.newAds[this.keywordIndex][0]['desc2'],
finalurl: this.newAds[this.keywordIndex][0]['finalurl'],
path1: '',
path2: '',
boolean: false
})
},
hideInput(ad) {
for(var x = 0; x < this.newAds.length; x++){
for(var i = 0; i < this.newAds[x].length; i++){
Vue.set(this.newAds[x][i], 'boolean', false)
}
}
ad['boolean'] = true;
},
deleteAd(){
let index = this.newAds[this.keywordIndex].findIndex(_a => _a.boolean);
this.newAds[this.keywordIndex].splice(index, 1);
setTimeout(() => {
if (this.newAds.length) {
this.newAds[Math.min(this.keywordIndex[index], this.newAds[this.keywordIndex].length - 1)]["boolean"] = true;
}
});
},
baseAds(){
this.newAds[0].push({
id: 0,
headline1: 'Headline 1',
headline2: 'Headline 2',
headline3: 'headline3',
desc1: 'This is your description 1',
desc2: 'This is your description 2',
finalurl: 'www.finalURL.com',
path1: '',
path2: '',
boolean: true
})
for(var x = 1; x < this.options.length; x++){
this.newAds.push([]);
}
},
restOfAds (){
var length = this.options.length
for(var x = 1; x < length; x++){
this.newAds[x].push({
id: x,
headline1: 'New',
headline2: this.newAds[0][0].headline2,
headline3: this.newAds[0][0].headline3,
desc1: this.newAds[0][0].desc1,
desc2: this.newAds[0][0].desc2,
finalurl: this.newAds[0][0].finalurl,
path1: this.newAds[0][0].path1,
path2: this.newAds[0][0].path2,
boolean: false
})
}
},
change (){
var index = this.options.indexOf(this.activeKeyword)
const startIndex = 2 * (this.adPage - 1);
for(var x = 0; x < this.newAds.length; x++){
for(var i = 0; i < this.newAds[x].length; i++){
Vue.set(this.newAds[x][i], 'boolean', false)
}
}
this.newAds[this.keywordIndex][startIndex]['boolean'] = true;
}
},
computed: {
options () {
const options = this.userInput.split('\n')
return Array.isArray(options) && !!options.length ? options.filter(option => !!option.length) : []
},
setActiveKeyword() {
this.activeKeyword = this.options[0]
},
activeKeywordd (){
return this.activeKeyword;
},
currentAds() {
const startIndex = 2 * (this.adPage - 1);
const endIndex = startIndex + this.perPage;
var _this = this
_this.change();
return this.newAds[this.keywordIndex].slice(startIndex, endIndex);
},
showGetStart (){
return this.steps.step < 4 ? true : false
},
keywordIndex (){
var activeKeyword = this.options.indexOf(this.activeKeyword)
Vue.set(this.activeAd, 0, activeKeyword)
return this.activeAd[0]
}
}
})