0

I have a component in a v-for

  <div
      v-for="(plan, index) in plans"
      :key="index"
    >

    <plan 
         :name="plan.name"
         :cost="plan.cost"
         :index="index"
        ref="myPlan"
       />
</div>

Within that component I have a method which clears all the data.

  clear() {
      this.cost = '';
      // some more clearing code
    },

I am trying to clear the plan by calling this method.

  this.$refs.myPlan.clear();

This does not work because the ref is an array, but this does clear the first plans

   this.$refs.myPlan[0].clear();

How can I call the clear method on all of the plans?

LeBlaireau
  • 17,133
  • 33
  • 112
  • 192
  • `this.$refs.myPlan.forEach(i => i.clear())` – thanksd Sep 27 '18 at 14:41
  • Thanks for the swift reply. Is this good practice? I thought there may be a better vue type way. – LeBlaireau Sep 27 '18 at 14:47
  • I mean it's not _bad_ practice. If you want to call the same method for each object in an array, then that's a good way to do it. Whether or not you need to be calling a child component's method from the parent context is dependant on what you're trying to implement. If the child components can determine when to clear their own data without needing to parent to execute the call, I'd restructure your app to work that way. – thanksd Sep 27 '18 at 14:57
  • thanks for the reply. – LeBlaireau Sep 27 '18 at 15:02

0 Answers0