CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Eddie Weldon
Eddie Weldon

Reputation: 133

How to update a child component when incrementing it in the parent component?

The problem: Whenever I increment the input field provided by the child component, the value doesn't set back to zero. It assumes the value of the previous instance.

Note: The increment is implemented in parent component method

Child component

<input type="number" placeholder="Amount" :value="value"  @input="$emit('input',$event.target.value/>

<script>
export default {
  props: ["value"],
  data() {
    return {};
  }
};
</script>

Parent Component

<template>
   <div>

<form-input v-for="n in count" :key="n" v-model="expense"> </form-input>

   <button @click="addInputs">Add Expense</button>

   <button @click="deleteInputs">Delete</button>


   </div>
</template>

export default {
  components: {
    "form-input": formInput
  },
  name: "form",
  data() {
    return {
      count: 0,
      earnings: "",
      expense: ""
    };
  },
  methods: {
    addInputs: function() {
      this.count++;

    },
    deleteInputs: function() {
      this.count--;
    }
  }
};
</script>

Please feel free to ask any questions if there any more needed information

Upvotes: 0

Views: 117

Answers (1)

T. Short
T. Short

Reputation: 3614

Why are you passing a value prop from the parent anyway? Shouldn't the value of the child be self-controlled?

Try removing the binding of value.

<input type="number" placeholder="Amount" @input="$emit('input',$event.target.value/>`

Upvotes: 1

Related Questions