2

I am using Vue Formulate and would like to customise the 'add more' button for group repeatable fields. I'm using a custom slot component which is working fine, however I can't figure out what the click event I need to use is so that when my button is clicked it actually adds another field. The same applies to a custom remove button component. I couldn't see anywhere in the docs of how to set this. So far I have this:

 <template>
  <a :for="context.id" @click="context.addMore()">
    {{ context.addLabel }}
  </a>
</template>

<script>
export default {
  props: {
    context: {
      type: Object,
      required: true
    },
  }
}
</script>

context.addMore() does not work

MSR
  • 510
  • 3
  • 5
  • 13

1 Answers1

0

You have to add addMore to props, it's not inside the context object.

<template>
  <a :for="context.id" @click="addMore">
    {{ context.addLabel }}
  </a>
</template>

<script>
export default {
  props: {
    context: {
      type: Object,
      required: true
    },
    addMore: {
      type: Function
    },

  }
}
</script>
revnandi
  • 1
  • 1