Я создаю веб-сайт книги рецептов и хочу динамически добавлять шаги рецепта. Я хочу, чтобы шаги добавлялись вместо того, чтобы пользователь вручную добавлял номер шага, а номер шага добавляется автоматически. Вот как это выглядит прямо сейчас, с добавлением номера шага вручную.
Мой вопрос заключается в том, может ли это быть добавлено динамически при динамическом добавлении этих шагов с помощью кнопки «плюс», начиная с шага 1. Как я могу это сделать?
Это код, который у меня есть сейчас для этого раздела
<el-form ref="form" :model="form" :rules="rules">
<el-row>
<div class="btn-link-plus action-button" @click="addStep()">
<i class="fas fa-plus"></i>
</div>
</el-row>
<div v-for="(item, index) in steps" :key="index">
<el-card shadow="never" class="step-card">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="Step Number" prop="num">
<el-input-number style="width: 100%" controls-position="right"
v-model="item.num"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="Duration" prop="duration">
<el-input-number style="width: 100%" controls-position="right"
v-model="item.duration"></el-input-number>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item label="Instructions" prop="instructions">
<el-input type="textarea" v-model="item.instructions"></el-input>
</el-form-item>
</el-row>
<el-row class="fa-pull-right">
<div class="btn-link-delete action-button" @click="removeStep(index)">
<i class="fas fa-trash-alt"></i>
</div>
</el-row>
</el-card>
</div>
</el-form>