Link generator with Vue.Js

marktplatz/templates/marktplatz/product_detail.html

@@ -2,6 +2,7 @@
 {% load fullurl %}
 {% load tags %}
 {% load static %}
+{% load compress %}
 {% load email_obfuscator %}
 
 
@@ -82,10 +83,6 @@
 		<div class="row gemain-color object-text">
 				<div class="col-sm-6">
 
-					<!-- <div id="app">
-						<p><% message %></p>
-					</div> -->
-
 
 					<h1 class="titlepro" style="">{{ object.name }}</h1>
 
@@ -281,11 +278,29 @@
 
 					{% endif %}</p>
 
+
 			    <!-- <p>{% if object.kraumangebot  %}<strong>{% field_name object 'kraumangebot' %}:</strong>  {{ object.kraumangebot }}{% endif %}</p> -->
 
 
 					{% endblock %}
 
+					<br />
+					<h5 class="mediumkur">Weiterführende Infos</h5>
+					<p>Posts tagged {{ object.name|slugify }}</p>
+					<br />
+					<ul>
+					<div class="" id="blog-post-demo" >
+
+					<blog-post
+					  v-for="post in posts"
+					  v-bind:key="post.id"
+					  v-bind:title="post.title"
+					  v-bind:link="post.link"
+					></blog-post>
+					</div>
+				</ul>
+
+
 
 					<br />
 					<h5 class="mediumkur">Mediacredits</h5>
@@ -376,54 +391,88 @@
 
 </div>
 
+{% compress js  %}
+
 <script>
 
-	// const resp = await axios.get('https://blog.gemeinschaffen.com/wp-json/wp/v2/tags');
 
-		axios.get('https://blog.gemeinschaffen.com/wp-json/wp/v2/tags').then(resp => {
-		    console.log(resp.data);
-				var q = jsonQuery('[*slug=gemeinschaffen]', {
-					data: resp.data
-				});
+$(document).ready(function($) {
+
+	 axios.get('https://blog.gemeinschaffen.com/wp-json/wp/v2/tags').then(resp => {
+
+ 		queryData(resp);
+
+ 	});
+
+	function queryData(resp) {
+
+		var q = jsonQuery('[*slug=gemeinschaffen]', {
+		// var q = jsonQuery('[*slug={{ object.name|slugify }}]', {
+			data: resp.data
+		});
+
+
+		if (!q.value.length ){
+
+			return;
 
-				posturl = "https://blog.gemeinschaffen.com/wp-json/wp/v2/posts?tags=" + q.value[0].id;
+		}
 
-				axios.get(posturl).then(resp => {
+		tagsurl = "https://blog.gemeinschaffen.com/wp-json/wp/v2/posts?tags=" + q.value[0].id;
 
-					function myFunction(value, index, array) {
-					  console.log( value.link );
-					}
+		axios.get(tagsurl).then(resp => {
 
-					resp.data.forEach(myFunction);
+			if (!resp.data.length ){
+
+				return;
+
+			}
+
+			generateLinks(resp);
 
-				});
 
 		});
 
+	}
+
+
+
+	function generateLinks(resp) {
+
+		Vue.component('blog-post', {
+		 props: ['title', 'link'],
+		 delimiters: ['<%', '%>'],
+		 template: `
+		 <li>
+			 <a title="link-title" :href="link" target="_blank" v-html="title.rendered"></a>
+		 </li>`
+	 })
+
+	 new Vue({
 
+		 el: '#blog-post-demo',
+		 delimiters: ['<%', '%>'],
+		 data: {
+			 posts: resp.data
+		 }
+	 })
 
-		// const TodoList = {
-		//   data() {
-		//     return {
-		//       groceryList: [
-		//         { id: 0, text: 'Vegetables' },
-		//         { id: 1, text: 'Cheese' },
-		//         { id: 2, text: 'Whatever else humans are supposed to eat' }
-		//       ]
-		//     }
-		//   }
+		// function myFunction(value, index, array) {
+		// 	console.log(value);
 		// }
 		//
-		// const app = Vue.createApp(TodoList)
-		//
-		// app.component('todo-item', {
-		//   props: ['todo'],
-		//   template: `<li>{{ todo.text }}</li>`
-		// })
-		//
-		// app.mount('#todo-list-app')
+		// resp.data.forEach(myFunction);
+
+	}
+
+
+
+ }); // document ready
+
+
 
 </script>
+{% endcompress %}
 
 
 

project_base/templates/base_generic.html

@@ -448,15 +448,7 @@
 
 {% endif %}
 
-<script>
-  // var app = new Vue({
-  //   el: '#app',
-  //   delimiters: ['<%', '%>'],
-  //   data: {
-  //     message: ''
-  //   }
-  // })
-</script>
+