[Vuejs]-How can I capture the data from a component input?

by

0👍

If I understand the problem correctly, the problem is how you’re using v-model on your NewIngredientInput component. It should bind to a single model, but you’re binding to multiple models (amount, unit_measure, name). Here is the simplified solution:

Change your NewIngredientInput in newrecipe page like this:

<NewIngredientInput
  :value="row"
  :showRemoveButton="index > 0"
  @removeRow="removeRow(index)"
/>

And:

<template>
  <!-- Your existing template code -->
</template>

<script>
export default {
  props: {
    showRemoveButton: Boolean,
    value: { type: Object, required: true },
  },
  data() {
    return { ingredient: { ...this.value } };
  },
  watch: {
    ingredient: {
      handler() { this.$emit('update', this.ingredient); },
      deep: true
    },
    value: {
      handler(newValue) { this.ingredient = { ...newValue }; },
      deep: true
    }
  },
  methods: {
    removeRow() { this.$emit("removeRow"); },
  },
};
</script>

Hope this helps!

Leave a comment