<template>
  <div class="container">
    <div class="row" style="font-size: 0.875rem">
      <button v-on:click="$emit('leftButton')" class="input-style button-left">
        -
      </button>
      <input
        type="text"
        v-model="inputFieldValue"
        size="3"
        class="input-style"
      />
      <button
        v-on:click="$emit('rightButton')"
        class="input-style button-right"
      >
        +
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: "InputButton",
  props: ["value"],
  computed: {
    inputFieldValue: {
      get() {
        //this function will determine what is displayed in the input
        return this.value;
      },
      set(newVal) {
        //this function will run whenever the input changes
        this.$emit("onInput", newVal);
      },
    },
  },
};
</script>

<style></style>
