Change button based on click vuejs tailwind

Question

I have expanded this code for my own learning abilities. I understand I can definitely shorten this down a LOT but I am trying to learn and expand my frontend experience.

So I have the code below. When localstorage it set to true/false it picks up the right v-if/else section. Now, what I need to do is set the local storage based on button click.

What is the best way to accomplish this?

   <div v-if="privateChat == 'false'">
          <button type="button">
                        <a key="privateChat" href="#" class="bg-red-900 text-gray-100 hover:bg-gray-800 hover:text-white group w-full p-3 rounded-md flex flex-col items-center text-xs font-medium">
                            <ChatIcon class="h-6 w-6 text-white"/>
                            <span class="pt-2">Private Chat OFF</span>
                        </a>
                    </button>
          </div>
          <div v-else>
          <button type="button">
                        <a key="privateChat" href="#" class="bg-green-900 text-gray-100 hover:bg-gray-800 hover:text-white group w-full p-3 rounded-md flex flex-col items-center text-xs font-medium">
                            <ChatIcon class="h-6 w-6 text-white"/>
                            <span class="pt-2">Private Chat ON</span>
                        </a>
                    </button>
          </div>

<script>
export default {
  data() {
    return {
      privateChat: (localStorage.getItem("privateChat") === 'true') ? 'true' : 'false',
     }
   },
  methods: {
    clickPrivateChat (value) {
      this.privateChat = value === true ? "true" : "false";
      localStorage.setItem("privateChat", value);
    },
  setup() {
    const enabled = ref(privateChat)
    let value = localStorage.getItem("privateChat");
    let privateChat = (value === 'true');
    }
</script>

Carol Skelly · Accepted Answer · 2021-06-23 18:02:57Z

There are several improvements you can make...

use actual true/false values instead of "true", "false" strings
DRY: you just need one button; use a Vue computed value to show "ON" or "OFF"
use conditional :class logic to apply bg-green-900 class

script:

  data() {
        return {
            privateChat: (localStorage.getItem("privateChat") === true) ? true : false,
        }
    },
    computed: {
        onOrOff() {
            return this.privateChat  ? 'ON' : 'OFF'
        }
    },
    methods: {
        clickPrivateChat (value) {
          this.privateChat = !this.privateChat
          localStorage.setItem("privateChat", value)
        },
        setup() {
            const enabled = ref(privateChat)
            let value = localStorage.getItem("privateChat")
            let privateChat = (value === true)
        }
  },

markup:

 <div>
    <button type="button" @click="clickPrivateChat">
        <a key="privateChat" href="#" :class="privateChat?'bg-green-900':''" class="bg-red-900 text-gray-100 hover:bg-gray-800 hover:text-white group w-full p-3 rounded-md flex flex-col items-center text-xs font-medium">
            <span class="pt-2">Private Chat {{ onOrOff }}</span>
        </a>
    </button>
 </div>

improved Vue approach

Collectives™ on Stack Overflow

Change button based on click vuejs tailwind

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related