src/components/SettingToggle.vue

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