explorata/src/components/MenuCellProperties.vue

<template>
  <MenuRow row-title="Cell Properties">
    <form>
      <div class="form-field">
        <label for="live">Living cell color</label>
        <input
          name="liveColor"
          type="color"
          @value="cellProperties.liveColor"
          @input="updateCellProperties"
        >
      </div>
      <div class="form-field">
        <label for="dead">Dead cell color</label>
        <input
          name="deadColor"
          type="color"
          :value="cellProperties.deadColor"
          @input="updateCellProperties"
        >
      </div>
      <div class="form-field">
        <label>Cell size</label>
        <input
          name="size"
          type="number"
          min="1"
          :value="cellProperties.size"
          @input="updateCellProperties"
        >
      </div>
    </form>
  </MenuRow>
</template>

<script>
import MenuRow from './MenuRow.vue'
export default {
  name: 'MainMenu',
  components: {
    MenuRow
  },
  data() {
    return {
      cellProperties: this.$store.state.cellProperties
    }
  },
  methods: {
    getCellProperties(event) {
      const elem = event.target
      const prop = this.$store.state.cellProperties
      return prop[elem.name]
    },
    updateCellProperties(event) {
      const elem = event.target
      const prop = {'name' : elem.name, 'value' : elem.value}
      //console.log(prop)
      this.$store.commit('setCellProperties', prop)
    }
  },
}
</script>