explorata/src/components/MenuElementaryCA.vue

<template>
  <MenuRow row-title="Elementary Cellular Automata">
    <div class="form-field">
      <label>Rules</label>
    </div>
    <form>
      <div
        v-for="rule in rules"
        :key="rule"
        class="form-field"
      >
        <label>{{ rule }}
          <input
            :value="getRule(rule)"
            type="checkbox"
            :name="rule"
            :checked="getRule(rule) == 1"
            @input="update1dRules"
          >
        </label>
      </div>
    </form>
    <div class="form-field">
      <input
        type="button"
        name="start"
        value="start"
        @click="draw1d"
      >
      <!-- <input -->
      <!--   type="button" -->
      <!--   name="stop" -->
      <!--   class="stop" -->
      <!--   value="stop" -->
      <!-- > -->
      <input
        type="button"
        name="reset"
        class="reset"
        value="reset"
        @click="reset()"
      >
    </div>
  </MenuRow>
</template>

<script>
import MenuRow from './MenuRow.vue'
export default {
  name: 'MenuElementaryCA',
  components: {
    MenuRow
  },
  data() {
    return {
      rules: ["111", "110", "101", "100", "011", "010", "001", "000"]
    }
  },
  methods: {
    update1dRules(event) {
      const elem = event.target
      const value = elem.checked ? 1 : 0
      const data = { 'rule' : elem.name, 'value' : value}
      this.$store.commit('update1dRules', data)
    },
    draw1d() {
      this.$root.$emit('draw1d')
    },
    getRule(id) {
      const rules = this.$store.state.rules1d
      return rules[id]
    },
    reset() {
      this.$root.$emit('reset')
    },
  }
}
</script>