AnonymousTopicBasedPubSubCommunicationforMicroblogging/gui/src/App.vue

<template>
<div class="main-grid">
<div class="head">2PPS
  	<form>
    <input type="text" ref="my_input">
    <button @click.prevent="submitTweet()">Submit</button>
  </form>
</div>
<div class="topicLists">
  <topicLists id="topicLists"></topicLists>
</div>
<div class="tweets">
  <ul>
    <Tweet
      v-for="(tweet, index) in tweets"
      :key="tweet.id"
      :topics="tweet.topics"
      :text="tweet.text"
    ></Tweet>
  </ul>
  </div>
</div>
<div class="ArchivedTweets">
</div>
 
</template>

<script>
import topicLists from './components/TopicLists.vue'
import Tweet from './components/Tweet.vue'

export default {
  components: { Tweet },
  data() {
    return {
      tweetToSubmit: '',
      tweets : [
        {
          id: 1,
          topics: "house",
          text: "asd"
        },
        {
          id: 2,
          topics: "mouse",
          text: "asdds"
        }
      ]
    }
  },
  methods: {
    submitTweet () {
      this.tweetToSubmit = this.$refs.my_input.value
    }
  }
}

</script>

<style>
@import './assets/base.css';

header {
  line-height: 1.5;
  text-align: center;
  font-size: large;
}

.topicLists {
  float : left;
  margin: 0 1.5%;
  width: 30%;
}

.tweets {
  float : left;
  margin: 0 1.5%;
  width: 30%;
}

</style>