按钮省略选项答案

【问题标题】：Button Omission Options按钮省略选项
【发布时间】：2020-10-20 04:51:23
【问题描述】：

我正在开发一个 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 语句来检查 index 是否等于 0，但是会出错。我正在使用 ejs 将 javascript 嵌入到我的 html 中。我不确定如何最好地解决这个问题，有什么建议吗？

感谢您的帮助。

【问题讨论】：

您应该可以将v-if="index > 0" 放在您的按钮元素上
解决了，谢谢！

标签： html node.js vue.js ejs

【解决方案1】：

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

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

【讨论】：