Vuejs get value from all fields in dynamic form-CodePudding

I'm building an admin panel with Vuejs and tailwind CSS to manage exercises of a page but I have run into some issues.

What I'm trying to do is insert the values of my dynamic form into a firebase real-time database but I can't find a way to get the values from the form. The idea is that a user can add more fields for each 'step' they want to add to an exercise by clicking on a plus button next to the field.

I have tried setting a reference in the setup script like so: const step = reference([]);, though this does not work. I have also tried adding it to the props but then I get an error saying step is not defined.

Below is the setup script:

<script setup>
import { database, auth } from "../firebase";
import { ref, setWithPriority, push, set } from "firebase/database";
import { ref as reference } from "vue";
import router from "../router";

let exerciseRef = ref(database, "exercises/");
let selected = reference(null);

const props = defineProps([
    "selected",
    "name",
    "video",
    "summary",
    "description",
    "isActive",
]);

const emits = defineEmits([
    "update:name",
    "update:video",
    "update:description",
    "update:summary",
    "update:isActive",
]);

function createExercise() {
    exerciseRef = ref(database, `exercises/${selected.value - 1}/4`);

    set(exerciseRef, {
        name: props.name,
        video: props.video,
        summary: props.summary,
        description: props.description,
        isActive: props.isActive,
    });

    let logRef = ref(database, "logs/exercise/");
    let pushRef = push(logRef);

    setWithPriority(
        pushRef,
        {
            type: "toegevoegd",
            exercise: props.name,
            admin: auth.currentUser.displayName,
            date: new Date().toLocaleString("nl-NL"),
        },
        0 - Date.now()
    );

    router.push("/admin/exercises");
}

This is the HTML for the dynamic form:

            <form>
                <div >
                    <label>Stappen</label>
                    <div
                        v-for="(input, index) in stepNumbers"
                        :key="`stepInput-${index}`"
                        
                    >
                        <input
                            v-model="input.step"
                            type="text"
                            
                            placeholder="Voer stap in"
                        />
                        <!--          Add Svg Icon-->
                        <svg
                            @click="addField(input, stepNumbers)"
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 24 24"
                            width="24"
                            height="24"
                            
                        >
                            <path fill="none" d="M0 0h24v24H0z" />
                            <path
                                fill="green"
                                d="M11 11V7h2v4h4v2h-4v4h-2v-4H7v-2h4zm1 11C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"
                            />
                        </svg>

                        <!--          Remove Svg Icon-->
                        <svg
                            v-show="stepNumbers.length > 1"
                            @click="removeField(index, stepNumbers)"
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 24 24"
                            width="24"
                            height="24"
                            
                        >
                            <path fill="none" d="M0 0h24v24H0z" />
                            <path
                                fill="#EC4899"
                                d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-9.414l2.828-2.829 1.415 1.415L13.414 12l2.829 2.828-1.415 1.415L12 13.414l-2.828 2.829-1.415-1.415L10.586 12 7.757 9.172l1.415-1.415L12 10.586z"
                            />
                        </svg>
                    </div>
                </div>
            </form>

And this is the script to add more fields to the form:

<script>
export default {
    name: "AddRemove",
    data() {
        return {
            stepNumbers: [{ step: "" }],
        };
    },
    methods: {
        addField(value, fieldType) {
            fieldType.push({ value: "" });
        },
        removeField(index, fieldType) {
            fieldType.splice(index, 1);
        },
    },
};
</script>

Any help or advice would be greatly appreciated.

CodePudding user response：

You map the input element with v-model to the "step" property of each object inside "stepNumbers", and then when you add an input you insert object with value property to the "stepNumbers" array, you should map the value to a single property.

Please check this code. https://codesandbox.io/s/serverless-brook-geii6z?file=/src/App.vue