Уважаемые форумчане! Помогите дописать правильный вывод ссылок в скрипте.
Есть скрипт, написанный одним человеком и доработанный другим участником данного форума.
Суть такая:
В поле Images вводится ссылка и отображается в html коде (справа) как img src... в двух местах.
В поле Links вводится другая ссылка и отображается в html коде (справа) a href=... между ссылками img src.
При вводе по одной ссылке в оба поля (images, links) все работает исправно (как надо). Проблема в том, что когда ссылки в оба поля вводятся от 2х и более, вывод становится не корректный и ссылка a href подписывается один раз в конце кода.
Необходимо, что бы при вводе ссылок в поля images и links (кол-во ссылок одинаковое) , выдавало html код вида img src.... a href.... img src... (вообщем так же, как при вводе в поля по одной ссылке).
Надеюсь понятно объяснил и надеюсь на вашу помощь!
Вот скрипт:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML output</title>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css">
</head>
<body class="pt-5">
<div id="app" class="container">
<div class="row">
<div class="col-md-12">
<h1 class="h3 pb-5">Generate HTML Template</h1>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="title">Title:</label>
<input id="title" type="text" v-model="title" class="form-control">
</div>
<div class="form-group">
<label for="img-links">Images</label>
<textarea id="img-links" cols="30" rows="10" v-model="imgLinksPlain" class="form-control"></textarea>
</div>
<div class="form-group">
<label for="a-links">Links</label>
<textarea id="a-links" cols="30" rows="10" v-model="hrefPlain" class="form-control"></textarea>
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea id="description" cols="30" rows="10" v-model="descriptionPlain" class="form-control"></textarea>
</div>
</div>
<div class="col-md-6">
<div class="form">
<label for="rawhtml">Raw HTML</label>
<textarea id="rawhtml" class="form-control" cols="30" rows="10" :value="html"></textarea>
<html-output :title="title" :links="links" :description="description" :hrefs="hrefs" v-show="false" @updated="templateUpdated"></html-output>
</div>
</div>
</div>
</div>
<template id="html-output">
<div>
<h2>{{title}}</h2>
<template v-for="link, i in links">
<img class="thumb-image" :data-src="link">
<div v-if="(i + 1) == links.length" class="gallery-content">
<a :data-href="hrefs[i]" target="_blank">
<img :data-src="link">
</a>
</div>
<img v-else :data-src="link">
</template>
<h3><font size="5">PRODUKTINFORMATION:</font></h3>
<ul style="">
<li style="" v-for="item in description">
<font size="4" style="">{{item}}</font>
</li>
</ul>
</div>
</template>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript">
Vue.component('html-output', {
template: '#html-output',
props: ['title', 'links', 'hrefs','description'],
updated () {
return this.$emit('updated', this.$el.innerHTML);
}
});
new Vue({
el: '#app',
data: {
title: '',
imgLinksPlain: '',
descriptionPlain: '',
html: '',
hrefPlain: ''
},
methods: {
templateUpdated (data) {
this.html = data.replace(/data-src/g, 'src').replace(/data-href/g, 'href');
}
},
computed: {
links() {
return this.imgLinksPlain.trim().split("\n");
},
description () {
return this.descriptionPlain.trim().split("\n");
},
hrefs(){ console.log(this.hrefPlain)
return this.hrefPlain.trim().split("\n");
}
}
});
</script>
</body>
</html>
