Home.vue

<template>
    <b-container fluid>
        <b-row>
            <b-col>1 of 3</b-col>
            <b-col cols="8">
                <b-form @submit="onSubmit" @reset="onReset" v-if="show" class="my-5">
                    <b-form-textarea id="textarea1"
                                     v-model="text"
                                     placeholder="What’s happening?"
                                     :rows="3"
                                     :max-rows="6">
                    </b-form-textarea>
                    <p class="text-right mt-2">
                        <b-button type="submit">Tweet</b-button>
                    </p>
                </b-form>

                <b-card v-for="tweet in tweets" class="mb-2">
                    <b-img left :src="tweet.user.image" width="125" height="125" alt="left image"/>
                    <p class="card-text font-weight-bold">
                        {{ tweet.user.username }}
                    </p>
                    <p class="card-text">
                        {{ tweet.text }}
                    </p>
                    <p class="card-text font-weight-bold">
                        {{ tweet.date }}
                    </p>
                </b-card>
            </b-col>
            <b-col>3 of 3</b-col>
        </b-row>
    </b-container>
</template>

<script>
    export default {
        data() {
            return {
                tweets: [],
                text: '',

                show: true
            }
        },
        created() {
            this.fetchData()
        },
        watch: {
            '$route': 'fetchData'
        },

        methods: {
            onSubmit(evt) {
                evt.preventDefault();

                let data = 'user_id=1&text=' + this.text;

                fetch('http://localhost:8080/Kwetter-1.0-SNAPSHOT/api/tweets', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: data,
                    mode: 'no-cors',
                })
                    .then((response) => response.json())
                    .then((responseJson) => {
                        console.info(responseJson);

                        this.tweets.push(responseJson)
                    });
            },
            onReset(evt) {
                evt.preventDefault();
                /* Reset our form values */
                this.text = ''
                /* Trick to reset/clear native browser form validation state */
                this.show = false;
                this.$nextTick(() => {
                    this.show = true
                });
            },
            fetchData () {
                fetch('http://localhost:8080/Kwetter-1.0-SNAPSHOT/api/users/1/tweets', {
                    mode: 'no-cors',
                })
                    .then((response) => response.json())
                    .then((response) => {
                        this.tweets = response
                    })
            }
        }
    }
</script>