src/components/SettingToggle.vue

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