om/public/home.js

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 () {
    return {
    }
  },
  template:
	`<div id="sample">
		<div v-for="msgs in private.messages">
    		<div  class="om-card card" 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>
				<a href="#">{{elements.tags}}</a></p>
				<div class="om-user-line">
					<i class="material-icons">account_circle</i>
					Erstellt von {{elements.user}}
				</div>
			</div>
    	</div>
	</div>`
})


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' }
          ]
        }
      ]
    }
  }
})
*/