1 year ago

How to change title with Vue

Posted 1 year 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

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

    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() {
                this.active = true;

            hide() {

                this.active = false;

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