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   },
  16   data: function () {
  17     return {
  18       secondaryIcon: null,
  19       value: true,
  20     };
  21   },
  22   created: function () {
  23     this.secondaryIcon = this.iconAlt || this.icon;
  24
  25     if (this.name in localStorage) {
  26       this.value = JSON.parse(localStorage[this.name]);
  27     }
  28
  29     this.$emit("updated", this.value);
  30   },
  31   methods: {
  32     toggleSetting: function () {
  33       this.value = !this.value;
  34       localStorage[this.name] = this.value;
  35       this.$emit("updated", this.value);
  36     },
  37   },
  38 };
  39 </script>