【发布时间】：2021-02-05 12:40:25
【问题描述】：
我有一个项目将配方中的成分添加到“购物清单”。 在这张照片中，底部的“糖”有几种成分。 当我单击加号时，我想将成分添加到“购物清单”中。 我该如何解决这个问题？
在此文件中，您可以使用该成分的名称和数量等数据创建一个成分。 创建成分：
<template>
<v-app>
<v-container>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<h2 class="btn-style">Add Ingredient</h2>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12>
<form @submit.prevent="onAddIngredient">
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-text-field name="id" label="Id" id="id" v-model="id" color="#43A047" required>
</v-text-field>
</v-flex>
</v-layout>
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-text-field name="name" label="Name" id="name" v-model="Name" color="#43A047" required>
</v-text-field>
</v-flex>
</v-layout>
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-text-field name="ingredientsQuantity" label="Ingredients Quantity" id="ingredientsQuantity" v-model="Quantity" color="#43A047" multi-line required>
</v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<v-btn class="green darken-1 color" type="submit">
Add
</v-btn>
</v-flex>
</v-layout>
</form>
</v-flex>
</v-layout>
</v-container>
</v-app>
</template>
<script>
export default {
data() {
return {
id: "",
Name: "",
Quantity: "",
};
},
computed: {
formIsValid() {
return (
this.id !== "" &&
this.Name !== "" &&
this.Quantity !== ""
);
}
},
methods: {
onAddIngredient() {
if (!this.formIsValid) {
return;
}
const ingredientData = {
id: this.id,
Name: this.Name,
Quantity: this.Quantity
};
this.$store.commit("createIngredients", ingredientData);
const stringifiedData = JSON.stringify(ingredientData);
// console.log("S: ", stringifiedData);
localStorage.setItem("ingredient", stringifiedData);
console.log("We got : ", JSON.parse(localStorage.getItem("ingredient")));
}
},
};
</script>
<style scoped>
.btn-style {
color: #43a047;
}
.color {
color: #fafafa;
}
</style>
还有这个显示所有成分的文件 购物清单：
<template>
<div>
<v-container class="mb-30">
<v-flex class="floating-right">
<v-btn large router to="/CreateNewIngrediets" class="green darken-1 btn-style margine mr-50">
<v-icon class="green darken-1 btn-style">mdi-plus</v-icon>
</v-btn>
</v-flex>
<v-container>
<v-layout row wrap v-for="ingredient in ingredients" :key="ingredient.id" class="mb-3 mt-4">
<v-flex xs6 sm8 md4 offset-sm1 offset-md2>
<v-card class="grey lighten-4 pl-3 ">
<v-container fluid>
<v-layout row class="pl-14">
<v-flex xs7 sm8 md9>
<v-card-title primary-title>
<v-flex xs7 sm8 md9>
<div>
{{ ingredient.Name }}
</div>
</v-flex>
<v-flex xs7 sm8 md9>
<div>
{{ ingredient.Quantity }}
</div>
</v-flex>
<v-flex xs5 sm4 md2>
<v-btn class="deleteColorIcon">
<v-icon left class=" pl-4" @click="
$store.commit('delete_ingredient', ingredient.id)
">
mdi-delete
</v-icon>
<!-- </v-btn> -->
</v-btn>
</v-flex>
</v-card-title>
</v-flex>
</v-layout>
</v-container>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-container>
</div>
</template>
<script>
export default {
computed: {
Recipes() {
return this.$store.getters.loadedRecipes;
},
ingredients() {
return this.$store.getters.loadedingredients;
}
}
};
</script>
<style scoped>
.color {
color: #43a047;
}
.deleteColorIcon {
color: #e53935;
}
.btn-style {
color: aliceblue;
}
</style>
而这个文件将配方显示为上图，并通过它显示所有配方元素，包括配料。 食谱：
<template>
<v-container>
<v-layout row wrap>
<v-flex x12>
<v-card>
<!-- <v-card-title> -->
<v-card-text>
<h4 class="btn-style mt-4 mb-4 font">
{{ recipe.title }}
</h4>
<v-img height="530px" :src="recipe.imageUrl" class="mb-4"></v-img>
<div class="btn-style mb-6">
{{ recipe.description }}
</div>
<div v-for="ing in recipe.ingredients" :key="ing.id">
{{ ing.Name }} {{ ing.Quantity }}
<v-btn class="green darken-1 color mb-5 ml-4 mr-4 pl-50">
<v-icon class="green darken-1 btn-style">mdi-plus</v-icon>
</v-btn>
</div>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<!-- <v-flex xs5 sm4 md2> -->
<v-btn class=" mb-4 mr-4">
<v-icon left class=" pl-4 ">
mdi-pen
</v-icon>
<!-- </v-btn> -->
</v-btn>
<!-- </v-flex> -->
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import {
mapGetters
}
from "vuex";
export default {
props: ["id"],
computed: {
recipe() {
const loadedRecipe = this.$store.getters.loadedRecipe(this.id);
console.log("We loaded a recipe with value : ", loadedRecipe);
return loadedRecipe;
},
ingredient() {
return this.$store.getters.loadedingredient(this.id);
}
},
methods: {
}
};
</script>
<style scoped>
.btn-style {
color: #43a047;
}
.color {
color: #fafafa;
}
.deleteColorIcon {
color: #e53935;
}
.font {
font-size: 30px;
}
</style>
【问题讨论】：
标签： vue.js vuex vuetify.js