按钮省略选项

Question

我正在做一个 nodejs 项目，在过去的几天里，我使用 Vuejs 组合了一个动态表单。但是，对于列表，我对如何省略 from 的动态部分的第一项的删除按钮感到困惑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Homemade</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

    <div class="newRecipeContainer">
        <form action="/recipes/createRecipe" method="POST">
            <div class="recipeNameContainer">
                <label class="recipeNameLabel">Title</label>
                <input type="text" name="recipeName">
            </div>

            <div class="directionsContainer">
                <button class="addDirectionButton" type="button" @click="addDirectionForm">Add Another Direction</button>
        
                <div class="allDirections" v-for="(direction, index) in directions">
                    <label class="direction">{{ index + 1 }}.)</label>
                    <input type="text" name="directions" v-model="direction.direction">
                    
                    <button class="deleteDirectionButton" type="button" @click="deleteDirectionForm(index)">Delete Direction</button>
                </div>
            </div>

            <div class="recipeImage">
                <input type="file" accept="image/*" /> 
            </div>

            <button class="createRecipeButton" type="submit">Create Recipe</button>
        </form>
    </div>

    <script src="/controls/newRecipeControl.js"></script>
</body>
</html>

var app = new Vue({
    el: '.directionsContainer',
    data: {
        directions: [
            {
                direction: ''
            }
        ]
    },
    methods: {
        addDirectionForm: function(){
            this.directions.push({
                direction: ''
            })
        },

        deleteDirectionForm: function(index){
            if(index != 0)
                this.directions.splice(index, 1)
        }
    }
})

最初我的想法是在html中使用if语句来检查索引是否等于0，但是，出错了。我正在使用 ejs 将 javascript 嵌入到我的 html 中。我不确定如何最好地解决这个问题，有什么建议吗？

感谢您的帮助。

Answer 1

在您的按钮元素上使用 Vue 的 conditional rendering 以仅针对大于零的索引显示它 1️⃣。

<button
  v-if="index > 0" 1️⃣
  class="deleteDirectionButton" 
  type="button" 
  @click="deleteDirectionForm(index)"
>Delete Direction</button>

按钮省略选项

Button Omission Options

html

ejs

node.js

vue.js