123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081 |
- <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>
|