Vue komponenten erstellt - Nachrichtenfelder

public/home.js

@@ -1,3 +1,49 @@
+Vue.component('msg-item', {
+    template: `<div id="newmessages-example">
+                <div class="om-card card">
+                <h6 class="msg-head">
+                <b>{{ title }}</b>
+                <img src="favicon.ico" width=20px height=20px>
+                </h6><br>
+                {{ subject }}<br><br>
+                <a href="#">{{ tag }}</a></p>
+                <div class="om-user-line">
+                <i class="material-icons">account_circle</i>
+                Erstellt von {{ user }}
+        </div></div>`,
+    props: ['title', 'subject', 'tag', 'user']
+})
+
+new Vue({
+    el: '#mewmessages-example',
+    data: {
+        messages: [
+            {
+                id: 1,
+                title: 'Betreff_1',
+                subject: 'Nachricht_1',
+                tag: '#tag_1',
+                user: 'user_1'
+              },
+            {
+                id: 2,
+                title: 'Betreff_2',
+                subject: 'Nachricht_2',
+                tag: '#tag_2',
+                user: 'user_2'
+              },
+            {
+                id: 3,
+                title: 'Betreff_3',
+                subject: 'Nachricht_3',
+                tag: '#tag_3',
+                user: 'user_3'
+              }
+            ],
+    },
+})
+
+
 /* First try of vue-componetn -> does not work
 Vue.component('home', {
   data: function () {

public/index.html

@@ -34,26 +34,43 @@
 		</div>
 	</div>
 
+    <script src="https://unpkg.com/vue"></script>
+    <div class="om-content">
+        <div id="mewmessages-example">
+                <div
+                    is="msg-item"
+                    v-for="(msg, index) in messages"
+                    v-bind:key="msg.id"
+                    v-bind:title="msg.title"
+                    v-bind:subject="msg.subject"
+                    v-bind:tag="msg.tag"
+                    v-bind:user="msg.user"
+                ></div>
+        </div>
+    </div>
+    <script src="./home.js"></script>
+
 	<!--first try of vue.js data-binding
 	<div class="om-content">
 		<div id="sample">
 		<div class="om-card card" v-for="msgs in private.messages">
     		<div v-for="elements in msgs.message">
-				<h6 class="msg-head">
-					<b>{{elements.subject}}</b>
-					<img src="favicon.ico" width=20px height=20px>
-				</h6>
-				<p>{{elements.msg}}<br>
+                <h6 class="msg-head">
+                <b>{{elements.subject}}</b>
+                <img src="favicon.ico" width=20px height=20px>
+                </h6>
+				<p>{{elements.msg}}
 				<a href="#">{{elements.tags}}</a></p>
-				<div class="om-user-line">
-					<i class="material-icons">account_circle</i>
-					Erstellt von {{elements.user}}
-				</div>
-			</div>
+				{{elements.user}}
+            </div>
+            <div class="om-user-line">
+            <i class="material-icons">account_circle</i>
+            Erstellt von
+        </div>
     	</div>
-	</div>
-	-->
-
+        </div>
+    </div>
+    -->
 
 	<!--HTML Mockup
 
@@ -146,41 +163,7 @@
 	<script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
 	<!-- NOTE: Call main.js -->
 	<script src="main.js"></script>
-	<script>
-	new Vue({
-  el: '#sample',
-  data: {
-    private: {
-      messages : [
-      {
-         	message : [
-          	{subject : 'Betreff_1'},
-            { msg : 'Nachricht_1' },
-            { tags : '#tag_1' },
-            { user : 'user_1' }
-          ]
-        },
-        {
-          message : [
-          	{subject : 'Betreff_2'},
-            { msg : 'Nachricht_2' },
-            { tags : '#tag_2' },
-            { user : 'user_2' }
-          ]
-        },
-        {
-          message : [
-          	{subject : 'Betreff_3'},
-            { msg : 'Nachricht_3' },
-            { tags : '#tag_3' },
-            { user : 'user_3' }
-          ]
-        }
-      ]
-    }
-  }
-})
-	</script>
+
 
 </body>