Form repeater Nuxt - Vue

form-repeater.vue

<template>
  <div class="mt-2">
    <template v-for="field in fields" :key="field.id">
      <div class="flex items-center gap-1 mb-1">
        <div class="w-full">
          <UInput
            v-model="field.content"
            type="text"
            size="md"
            variant="outline"
            color="white" />
        </div>
        <UTooltip text="Rename slug" :shortcuts="['⌘', 'O']">
          <UButton
            @click="removeField(field.id)"
            icon="i-heroicons-trash"
            size="md"
            color="white"
            square
            variant="solid" />
        </UTooltip>
      </div>
    </template>

    <UButton
      @click="addField"
      variant="solid"
      size="md"
      color="white"
      block
      class="mt-2">
      + Add
    </UButton>
  </div>
</template>

<script setup>
const props = defineProps({
  pricingFeatures: {
    type: String,
    required: true,
  },
});
const { pricingFeatures } = toRefs(props);

const emit = defineEmits(["onRepeater"]);

const pricingFeaturesArray = pricingFeatures.value.split(",");

// console.log(pricingFeaturesArray)

var b = pricingFeaturesArray.map((str, index) => ({
  id: index + 1,
  content: str,
}));
// console.log("b", b)

const fields = ref([{ id: 1, content: "" }]);

fields.value = b;

const fieldCount = ref(1);

function addField() {
  fieldCount.value++;
  fields.value.push({ id: fieldCount.value, content: "" });
}
function removeField(id) {
  fields.value = fields.value.filter((obj) => obj.id !== id);
}

onUpdated(() => {
  emit("onRepeater", fields.value);
});
</script>