hjortur17
5 months ago
131
5
Vue

How to change title with Vue

Posted 5 months ago by hjortur17

Hi, I'm trying to create Vue Sort Component and when you click a link I want to show the title in my button. For example first time a see the button it says show, but then I click it and get the dropdown and see for example Popular and I click it I want to make the button say: Popular instead of Sort.

Do you understand?

Here is my SortThreads.vue

<template>
    <div class="p-2">
        <button @click="toggle" class="bg-grey-light text-grey-darker rounded-full px-4 py-2" v-on-clickaway="hide" v-text="title"></button>

        <div v-if="active" class="w-64 bg-white shadow-md rounded p-4 mt-2 absolute z-20">
            <ul class="list-reset">
                <li class="mb-3">
                    <a href="/fréttir?vinsælt=1">Vinsælt</a>
                </li>
                <li>Homi</li>
            </ul>
        </div>
    </div>
</template>

<script>
    import { mixin as clickaway } from 'vue-clickaway';

    export default {
        mixins: [ clickaway ],

        data() {
            return {
                active: false,
                title: ""
            }
        },

        methods: {
            toggle() {
                this.active ? this.hide() : this.show();
            },

            show() {
                flash("já");
                this.active = true;
            },

            hide() {
                flash("nei");

                this.active = false;
            }
        }   
    }
</script>

Please sign in or create an account to participate in this conversation.