如何存储/保存用户输入的有序列表？

Question

我在这里有一个不知何故的菜鸟问题。什么是允许用户以特定顺序输入多个项目（文本输入）的最简单/理想/最合适的表单元素或方法？该列表应该以与输入的顺序相同的顺序存储在数组中。

具体来说，我希望得到的数组类似于以下内容：

const directions = [
 'Step 1: Firstly, do something',
 'Step 2: Then do something',
 'Step 3: Then do something',
 'Step 4: Then do something',
 'Step 5: Finally, do something'
]

为了清楚起见，我知道我可以使用明显的多个文本输入甚至是textarea，但我觉得有更好的方法。如前所述，目标是最终得到存储为数组的有序/排序项目列表。

我不确定是否需要包含我目前所拥有的代码段，但我已经包含了相关部分。我正在使用Vue.js 2，但我遇到了与React甚至是香草JS相同的问题。

模板部分

<template>
    <div class="new-recipe">
        <div class="row">
            <div class="col s6 offset-s3">
                <form @submit.prevent="addRecipe">
                    <div class="row">
                        <div class="col s12">
                            <h3>Add Recipe</h3>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s12">
                            <input id="dish_name" type="text" class="validate" v-model="dish_name">
                            <label for="dish_name">Dish Name</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s12">
                        <select multiple v-model="dish_type">
                              <option value="" disabled selected>Select dish type</option>
                              <template v-for="dish in dish_types">
                                <option 
                                    :value="dish.type" 
                                    :key="dish.type"
                                >
                                {{ dish.type }}
                                </option>
                              </template>
                            </select>
                          <label>Dish Type</label>
                       </div>
                    </div>
                   <div class="row">
                        <div class="input-field col s6">
                            <input id="image" type="text" class="validate" v-model="image">
                            <label for="image">Image Link</label>
                        </div>
                        <div class="input-field col s6">
                            <input id="video" type="text" class="validate" v-model="video">
                            <label for="video">Video Link</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s3">
                            <select v-model="rating">
                                <option value="" disabled selected>Rating</option>
                                <template v-for="rating in 5">
                                    <option :value="rating" :key="rating">{{ rating }} star(s)</option>
                                </template>
                            </select>
                            <label>Select Rating</label>
                        </div>
                        <div class="input-field col s3">
                            <input id="servings" type="text" class="validate" v-model="servings">
                            <label for="servings">Servings</label>
                        </div>
                        <div class="input-field col s3">
                            <input id="prep_time" type="text" class="validate" v-model="prep_time">
                            <label for="prep_time">Prep. Time (in min)</label>
                        </div>
                        <div class="input-field col s3">
                            <select v-model="difficulty">
                                <option value="" disabled selected>Difficulty</option>
                                <option value="Easy">Easy</option>
                                <option value="Medium">Medium</option>
                                <option value="Hard">Hard</option>
                            </select>
                            <label>Select Difficulty</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s12">
                            <textarea 
                                id="textarea1" class="materialize-textarea" 
                                v-model="ingredients">
                            </textarea>
                        <label for="textarea1">Ingredients</label>
                        </div>
                        <div class="input-field col s12">
                            <textarea 
                                id="textarea1" class="materialize-textarea" 
                                v-model="directions">
                            </textarea>
                        <label for="textarea1">Directions</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col s12">
                            <button class="btn">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

脚本部分

<script>
    /* eslint-disable */
    import { dish_types } from '../../testData';

    export default {
        name: 'newrecipe',
        data() {
            return {
                dish_name: null,
                dish_types,
                dish_type: [],
                image: null,
                video: null,
                servings: null,
                prep_time: null,
                rating: null,
                difficulty: null,
                ingredients: [],
                directions: [],
            }
        },
        methods: {
            navigateTo(tab) {
                this.$router.push(tab)
            },
            clear() {
            this.$refs.form.reset()
          },
          addRecipe() {
            const recipe = {};

            recipe.dish_name = this.dish_name;
                recipe.dish_type = this.dish_type;
                recipe.image = this.image;
                recipe.video = this.video;
                recipe.servings = this.servings;
                recipe.prep_time = this.prep_time;
                recipe.rating = this.rating;
                recipe.difficulty = this.difficulty;
                recipe.ingredients = this.ingredients;
                recipe.directions = this.directions;

            console.log(recipe);
            this.$store.dispatch('saveRecipe', recipe)
                this.$router.push('/recipes')
            this.clear();
          }
        }
    };
</script>