parsley/app/javascript/components/TheCalculator.vue

<template>
  <div>
    <h1 class="title">Calculator</h1>

    <div v-for="err in errors" :key="err" class="notification is-warning">
      {{err}}
    </div>

    <div class="columns">
      <div class="field column">
        <label class="label">Input</label>
        <div class="control">
          <input class="input" type="text" placeholder="input" v-model="input">
        </div>
      </div>
      <div class="field column">
        <label class="label">Output Unit</label>
        <div class="control">
          <input class="input" type="text" placeholder="unit" v-model="outputUnit">
        </div>
      </div>

    </div>

    <div class="columns">
      <div class="field column">
        <label class="label">Ingredient</label>
        <div class="control">
          <app-autocomplete
              :inputClass="{'is-success': ingredient !== null}"
              ref="autocomplete"
              v-model="ingredient_name"
              :minLength="2"
              valueAttribute="name"
              labelAttribute="name"
              placeholder=""
              @optionSelected="searchItemSelected"
              :onGetOptions="updateSearchItems"
          >
          </app-autocomplete>
        </div>
      </div>

      <div class="field column">
        <label class="label">Density</label>
        <div class="control">
          <input class="input" type="text" placeholder="8.345 lb/gallon" v-model="density" :disabled="ingredient !== null">
        </div>
      </div>
    </div>

    <div class="field">
      <label class="label">Output</label>
      <div class="control">
        <input class="input" type="text" disabled="disabled" v-model="output">
      </div>
    </div>
  </div>
</template>

<script>

  import api from "../lib/Api";
  import debounce from "lodash/debounce";

  export default {
    data() {
      return {
        input: '',
        outputUnit: '',
        ingredient_name: '',
        ingredient: null,
        density: '',
        output: '',
        errors: []
      };
    },

    methods: {
      updateSearchItems(text) {
        return api.getSearchIngredients(text);
      },

      searchItemSelected(ingredient) {
        this.ingredient = ingredient || null;
        this.ingredient_name = ingredient.name || null;
        this.density = ingredient.density || null;
      },

      updateOutput: debounce(function() {
        this.loadResource(api.getCalculate(this.input, this.outputUnit, this.ingredient ? this.ingredient.ingredient_id : null, this.density)
          .then(data => {
            this.output = data.output;
            this.errors = data.errors;
          })
        );
      }, 500)
    },

    watch: {
      'ingredient_name': function(val) {
        if (this.ingredient && this.ingredient.name !== val) {
          this.ingredient = null;
        }
      }
    },

    created() {
      this.$watch(
        function() {
          return [this.input, this.outputUnit, this.density, this.ingredient];
        },
        function() {
          this.updateOutput();
        }
      )
    },

    components: {
    }
  }

</script>

<style lang="scss" scoped>
</style>