explorata/src/components/MenuGeneralOptions.vue

<template>
  <MenuRow row-title="General Options">
    <form>
      <div class="form-field">
        <label>Canvas Resolution</label>
      </div>
      <div class="form-field">
        <label>Width</label>
        <input
          id="canvasWidth"
          name="canvasWidth"
          type="number"
          step="10"
          :value="canvasWidth"
          @input="updateCanvasWidth"
        >
      </div>
      <div class="form-field">
        <label>Height</label>
        <input
          id="canvasHeight"
          name="canvasHeight"
          type="number"
          step="10"
          :value="canvasHeight"
          @input="updateCanvasHeight"
        >
      </div>
      <div class="form-field">
        <label>Refresh Rate (ms)</label>
      </div>
      <div class="form-field">
        <input
          id="refreshRate"
          name="refreshRate"
          type="number"
          min="100"
          step="100"
          :value="refreshRate"
          @input="updateRefreshRate"
        >
      </div>
    </form>    
  </MenuRow>
</template>

<script>
import MenuRow from './MenuRow.vue'
import {mapGetters} from 'vuex'
export default {
  name: 'MenuGeneralOptions',
  components: {
    MenuRow
  },
  computed: {
    ...mapGetters({
      canvasWidth: 'getCanvasWidth',
      canvasHeight: 'getCanvasHeight',
      refreshRate: 'getRefreshRate'
    })
  },
  methods: {
    updateCanvasHeight: function(event) {
      const elem = event.target
      this.$store.commit('setCanvasHeight', elem.value)
    },
    updateCanvasWidth: function(event) {
      const elem = event.target
      this.$store.commit('setCanvasWidth', elem.value)
    },
    updateRefreshRate: function(event) {
      const elem = event.target
      this.$store.commit('setRefreshRate', elem.value)
    }
  }
}
</script>