f7-message.vue

<template>
  <f7-page>
    <f7-navbar :title="title" class="target-name" back-link="Back" sliding></f7-navbar>
    <f7-messages>
      <ul>
        {{this.$route.params.username}}
        <li v-for="(value, key) in $route.params" :key="'param-' + key"><b>{{key}}:</b> {{value}}</li>
      </ul>
      <f7-message v-for="message in messages"
        :text="message.text"
        :label="message.label"
        :date="message.date"
        :name="message.name"
        :avatar="message.avatar"
        :type="message.type"
        :day="message.day"
        :time="message.time"
        @click="onClick"
        @click:text="onTextClick"
        @click:name="onNameClick"
        @click:avatar="onAvatarClick"
      ></f7-message>
    </f7-messages>
    <f7-messagebar placeholder="Message" send-link="Send" @submit="onSubmit"></f7-messagebar>
  </f7-page>
</template>
<script>
  export default {
    data: function () {
      return {
        name: 'Vladimir',
        avatar: 'path/to/avatar-1.jpg',
        messages: JSON.parse(localStorage.getItem('messages-'+this.$route.params.roomId)),
        title: this.$route.params.username,
        roomId: this.$route.params.roomId
      }
    },
    mounted: function() {
      this.$socket.emit("loadRoomMessage", this.roomId);
    },
    methods: {
      onClick: function (event) {
        console.log('message click');
      },
      onAvatarClick: function () {
        console.log('avatar-click');
      },
      onTextClick: function () {
        console.log('text-click');
      },
      onNameClick: function () {
        console.log('name-click');
      },
      onSubmit: function (text, clear) {
        if (text.trim().length === 0) return;
        this.messages.push({
          name: this.name,
          avatar: this.avatar,
          text: text,
          date: (function () {
            var now = new Date();
            var hours = now.getHours();
            var minutes = now.getMinutes();
            return hours + ':' + minutes;
          })()
        });
        // Clear Message Bar
        clear();
      }
    },
    socket: {
			// Prefix for event names
			// prefix: "/counter/",
			// If you set `namespace`, it will create a new socket connection to the namespace instead of `/`
			// namespace: "/counter",
			events: {
				// Similar as this.$socket.on("changed", (msg) => { ... });
				// If you set `prefix` to `/counter/`, the event name will be `/counter/changed`
				//
				loadRoomMessage(messages) {
					console.log(messages);
				}
				/* common socket.io events
				connect() {
					console.log("Websocket connected to " + this.$socket.nsp);
				},
				disconnect() {
					console.log("Websocket disconnected from " + this.$socket.nsp);
				},
				error(err) {
					console.error("Websocket error!", err);
				}
				*/
			}
		}
  }
</script>