Render Input fields based on if field value of the field above/before Vue JS v-for/v-if

Question

so I have a simple code of input fields which works as expected, but i try to make it more elegant. Now my goal is to replace this first code part with a v-for / v-if condition, since i want to render up to 8 fields based on if there is an entry in the field before. Appreciate any help.

template.js

  data () {
    return {
 company: {
            name: null,
            brandName: null,
            about: null,
            avatar: null,
            documents: null,
            services: [],
            serviceInitial: 1,
            serviceIndex: 0,
            serviceFieldCount: 8,
        },}}

template.vue

<form-input
                v-if="company.services[0]"
                id="website"
                v-model="company.services[1]"
                class="company-create__input"
                name="company.services"
                :placeholder="$t('companyCreation.inputServicesPlaceholder') + ' '     + 2"
            />

            <form-input
                v-if="company.services[1]"
                id="website"
                v-model="company.services[2]"
                class="company-create__input"
                name="company.services"
                :placeholder="$t('companyCreation.inputServicesPlaceholder') + ' ' + 3"
            />

and so on... up to 8 fields

My new approach which doesn't work yet:

 <form-input
            v-for="serviceIndex in getServiceFieldCount"
            v-if="getServiceInitial +   company.services[serviceIndex]>getServiceInitial"
            :id="company.services[serviceIndex]"
            :key="serviceIndex"
            v-model="company.services[serviceIndex]"
            class="company-create__input"
            name="company.services"
            :placeholder="$t('companyCreation.inputServicesPlaceholder')+ ' '+ serviceIndex"
        />

Answer 1

v-for and v-if is not gonna work in same tag , so use a span wrapper around form-input to use the v-for loop and if condition on the form-input tag

<span  v-for="serviceIndex in getServiceFieldCount">
     <form-input v-if="your condition"/>
</span>