src/components/SettingToggle.vue

   1 <template>
   2   <a v-on:click="toggleSetting()" class="navbar-item is-inline-block-mobile">
   3     <span><i :class="['fas', 'fa-fw', value ? icon : secondaryIcon]"></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     defaultValue: Boolean,
  16   },
  17   data: function () {
  18     return {
  19       secondaryIcon: null,
  20       value: true,
  21     };
  22   },
  23   created: function () {
  24     this.secondaryIcon = this.iconAlt || this.icon;
  25
  26     if (this.name in localStorage) {
  27       this.value = JSON.parse(localStorage[this.name]);
  28     } else {
  29       this.value = this.defaultValue;
  30     }
  31
  32     this.$emit("updated", this.value);
  33   },
  34   methods: {
  35     toggleSetting: function () {
  36       this.value = !this.value;
  37       localStorage[this.name] = this.value;
  38       this.$emit("updated", this.value);
  39     },
  40   },
  41 };
  42 </script>