Как мне заставить кнопку удаления работать на веб-сайте ⇐ CSS

[Anonymous]

Сейчас я работаю над проектом JavaScript с использованием HTML, CSS и Vue. Проект заключается в создании кулинарной онлайн-книги, в которую вы сможете добавлять свои рецепты, а также удалять рецепты. У меня проблема в том, что когда я пытаюсь реализовать кнопку удаления для добавленных рецептов, веб-сайт ломается и данные рецепты больше не отображаются, и я также не могу добавлять новые рецепты. Я использую это в качестве основы для кода удаления:
который заставляет кнопку работать, но ничего не удаляет
Я пробовал изменить базовый рецепт к ссылке, а также функция добавления нового рецепта к ссылке, но затем у меня возникает проблема с тем, что базовый рецепт больше не отображается, а также кнопка для добавления нового рецепта. Итак, теперь я не знаю, как изменить свой код, чтобы кнопка добавления рецепта и кнопка удаления работали.
Ниже приведен мой код, и я изменил его обратно на тот, который был до изменения ссылки. чтобы хотя бы кнопка добавить рецепт работала:
import {loadThings} from "@/components/script.js";
import { ref } from 'vue';
let showRecipeName = true;
let showForm = ref(false);
let recipes = [
{
name: "Spaghetti Carbonara",
picture:
preparationTime: "20 Minuten",
cookingTime: "15 Minuten",
description: "Spaghetti Carbonara ist ein klassisches italienisches Nudelgericht, das in der Regel aus Spaghetti, Guanciale, Ei, Pecorino Romano und Pfeffer zubereitet wird. Die Zutaten werden in einer Pfanne gemischt, bis sie eine cremige Konsistenz haben. Das Gericht wird oft mit zusätzlichem Pecorino Romano und Pfeffer garniert.",
ingredients: [
"400g Spaghetti",
"200g Guanciale",
"4 Eier",
"100g Pecorino Romano",
"Pfeffer"
],
instructions: [
"Die Spaghetti in einem großen Topf mit kochendem Salzwasser al dente kochen.",
"In der Zwischenzeit das Guanciale in einer Pfanne bei mittlerer Hitze knusprig braten.",
"Die Eier in einer Schüssel verquirlen und den geriebenen Pecorino Romano hinzufügen.",
"Die gekochten Spaghetti abgießen und in die Pfanne mit dem Guanciale geben. Die Ei-Käse-Mischung darüber gießen und gut vermengen.",
"Mit Pfeffer würzen und sofort servieren."
]
}
];
let newRecipe ={
name: "",
picture: "",
preparationTime: "",
cookingTime: "",
description: "",
ingredients: [""],
instructions: [""]
};

function addRecipe() {
newRecipe.ingredients = newRecipe.ingredients.split('\n');
newRecipe.instructions = newRecipe.instructions.split('\n');
recipes.push({...newRecipe});
newRecipe = {
name: "",
preparationTime: "",
cookingTime: "",
description: "",
ingredients: [""],
instructions: [""]
};
showForm.value = false;
}
function showAddRecipeForm() {
showForm.value = true;
}
function deleteRecipe(index) {
console.log("deleteRecipe function called with index: ", index);
recipes.splice(index, 1);
}





Rezepte
Load recipes
Add Recipe


Name:
Preparation Time:
Cooking Time:
Description:
Ingredients:
Instructions:
Picture:
Add Recipe




{{ recipe.name }}
Delete Recipe

Description
{{ recipe.description }}
Preparation Time
{{ recipe.preparationTime }}
Cooking Time
{{ recipe.cookingTime }}
Ingredients

• {{ ingredient }}

Instructions

• {{ instruction }}

.addrecipe
{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
margin-top: 3rem;
padding: 50px;
}
.addrecipe button[type="submit"] {
margin-top: 20px;
align-items: flex-start;
}
.body {
margin-top: 0rem;
display: flex;
flex-direction: column;
align-items: flex-start; /* Adjust this line */
gap: 2px; /* Adjust as needed */
background-color: whitesmoke;

}
.newRecipe{
margin-top: 0rem;
display: flex;
flex-direction: column;
align-items: flex-start; /* Adjust this line */
gap: 20px; /* Adjust as needed */
background-color: whitesmoke;
padding: 10px;
}
.recipeheader {
min-height: 30vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: white;
}
@media (min-width: 1024px) {
.recipeheader {
height: 100vh;
justify-content: center;
display: flex;
align-items: center;
}
}



Подробнее здесь: https://stackoverflow.com/questions/785 ... -a-website