src/components/SettingToggle.vue

   1 <template>
   2   <a v-on:click="toggleSetting()" class="navbar-item is-inline-block-mobile">
   3     <span><i :class="['fas', value ? icon : iconAlt]"></i></span>
   4     <slot></slot>
   5   </a>
   6 </template>
   7
   8 <script>
   9 export default {
  10   name: "SettingToggle",
  11   props: {
  12     name: String,
  13     icon: String,
  14     iconAlt: String,
  15   },
  16   data: function () {
  17     return {
  18       value: true,
  19     };
  20   },
  21   created: function () {
  22     if (!this.iconAlt) {
  23       this.iconAlt = this.icon;
  24     }
  25
  26     if (this.name in localStorage) {
  27       this.value = JSON.parse(localStorage[this.name]);
  28     }
  29
  30     this.$emit("updated", this.value);
  31   },
  32   methods: {
  33     toggleSetting: function () {
  34       this.value = !this.value;
  35       localStorage[this.name] = this.value;
  36       this.$emit("updated", this.value);
  37     },
  38   },
  39 };
  40 </script>