Более функциональный вид - возможность создавать текстовые объявления.С левой стороны - пользовательский ввод для активной рекламы, а справа - реклама.Пользователь может создавать новые объявления, которые просто добавляют объект в массив.Когда имеется более 2 объявлений, включается функция разбивки на страницы, чтобы одновременно отображалось только 2 объявления, а затем отображается новый элемент для перехода на вторую страницу объявлений.При нажатии на него объявление становится «активным», и в отображаемом объявлении появляется «X», которое показывает его активность, а также дает возможность удалить объявление, нажав «X».При удалении объявления оно будет активным.Удалите объявление 2, и объявление 1 станет активным.Поля ввода пользователя соответствуют тому, какое объявление активно.
Все работает нормально, но только когда показывается только активное объявление, т.е.всего 3 объявлений, поэтому на странице 2 показывается только 1 объявление.Если вы удалите это объявление, код по какой-то причине вылетает.Объявления активируются, просто устанавливая логическое значение для этого объявления (объекта) в «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]
}
}
})