Javascript 推送到阵列后清除Vue中的输入
我在html中有一个div，我可以在其中填充输入，然后将配方保存到一个数组中。我有一个方法。除此之外，我还有一个搜索字段和一个计算函数来搜索数组中的配方。但在我将配方添加到数组后，如果我试图清除用于输入配方名称的输入，搜索方法会告诉我“无法读取null的小写属性”。我不明白为什么我推送到数组中的对象会在模型中给我带来问题。下面是代码，我不知道我是否解释得很好Javascript 推送到阵列后清除Vue中的输入,javascript,vue.js,Javascript,Vue.js,我在html中有一个div，我可以在其中填充输入，然后将配方保存到一个数组中。我有一个方法。除此之外，我还有一个搜索字段和一个计算函数来搜索数组中的配方。但在我将配方添加到数组后，如果我试图清除用于输入配方名称的输入，搜索方法会告诉我“无法读取null的小写属性”。我不明白为什么我推送到数组中的对象会在模型中给我带来问题。下面是代码，我不知道我是否解释得很好 <div v-show="show_add_receta"> <p>
<div v-show="show_add_receta">
<p>
<input type="text" placeholder="id..." v-model="new_receta.id">
</p>
<p>
<input type="text" placeholder="nombre..." v-model="new_receta.nombre">
</p>
<p>
<textarea type="text" placeholder="descripcion..." cols="30" rows="10" v-model="new_receta.descripcion"></textarea>
</p>
<p>
<input type="text" placeholder="chef..." v-model="new_receta.chef">
</p>
<p>
<input type="text" placeholder="ingredientes..." v-model="nuevo_ingrediente" @keyup.enter="AgregarIngrediente()">
</p>
<ul>
<li v-for="ingrediente in new_receta.ingredientes" :key="ingrediente.id"> {{ ingrediente.nombre }} </li>
</ul>
<p>
<button @click="AgregarReceta()">Guardar nueva receta</button>
</p>
</div>
我添加了
resetFormobj<template>
<div v-show="show_add_receta" style="padding-left: 2rem">
<p>
<input type="text" placeholder="id..." v-model="new_receta.id" />
</p>
<p>
<input type="text" placeholder="nombre..." v-model="new_receta.nombre" />
</p>
<p>
<textarea
type="text"
placeholder="descripcion..."
cols="30"
rows="10"
v-model="new_receta.descripcion"
></textarea>
</p>
<p>
<input type="text" placeholder="chef..." v-model="new_receta.chef" />
</p>
<p>
<input
type="text"
placeholder="ingredientes..."
v-model="nuevo_ingrediente"
@keyup.enter="AgregarIngrediente()"
/>
</p>
<ul>
<li v-for="ingrediente in new_receta.ingredientes" :key="ingrediente.id">
{{ ingrediente.nombre }}
</li>
</ul>
<p>
<button @click="AgregarReceta()">Guardar nueva receta</button>
</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
lista_recetas: [
{
id: "001",
nombre: "Receta de Tarta de manzana sin azúcar",
descripcion:
"Descorazona dos de las manzanas y pélalas. Trocea en cubos grandes y ponlos en una olla al fuego con la ramita de canela. Una vez hierva, baja un poco el fuego, tapa la olla y deja cocer entre 20-30 min o hasta que las manzanas estén tiernas.",
chef: "Isabel Rescalvo",
ingredientes: [
{
id: "i001",
nombre: " 3 manzanas grandes",
},
{
id: "i002",
nombre: " 1 rama de canela",
},
{
id: "i003",
nombre: "1 plátano maduro",
},
],
},
{
id: "002",
nombre: "Carlota de mango",
descripcion:
"Corta la punta de los bizcochos de soletilla sin excederte y guárdala. Recuerda que también puedes hacer la receta de carlota de mango con galletas Marías.",
chef: "Isabel Rescalvo",
ingredientes: [
{
id: "i004",
nombre: "175 gramos de azúcar",
},
{
id: "i005",
nombre: " 2 claras de huevo a temperatura ambiente",
},
{
id: "i006",
nombre: "400 gramos de nata para montar o crema de leche",
},
{
id: "i007",
nombre: "100 gramos de mango troceado",
},
],
},
{
id: "003",
nombre: "Pie de parchita",
descripcion:
"Tritura las galletas hasta hacerlas polvo en la licuadora o procesadora.",
chef: " Dani León.",
ingredientes: [
{
id: "i008",
nombre: " 3 yemas de huevo",
},
{
id: "i009",
nombre: " 1 lata de leche condensada (397 grs)",
},
],
},
{
id: "004",
nombre: "Dulce de leche reposteroa",
descripcion:
"Tritura las galletas hasta hacerlas polvo en la licuadora o procesadora.",
chef: "Carolina. ",
ingredientes: [
{
id: "i010",
nombre: " 1 litro de leche entera",
},
{
id: "i011",
nombre: " 300 gramos de azucar (1½ tazas)",
},
{
id: "i012",
nombre: " 1 cucharadita de esencia de vainilla",
},
],
},
{
id: "005",
nombre: "Mermelada de nísperos",
descripcion: "Limpia los nísperos, quítales el hueso y la piel..",
chef: " Montse Morote Ortega",
ingredientes: [
{
id: "i013",
nombre: " 1 kilogramo de nísperos sin piel y sin hueso",
},
{
id: "i014",
nombre: " 200 gramos de azúcar (1 taza)",
},
{
id: "i015",
nombre: "1 trozo de limón",
},
{
id: "i016",
nombre: "2 cucharadas soperas de agua",
},
],
},
],
search: "",
show_add_receta: true,
new_receta: {
id: "",
nombre: "",
descripcion: "",
chef: "",
ingredientes: [],
},
nuevo_ingrediente: "",
};
},
computed: {
lista_recetas_filtrada: function () {
var self = this;
return this.lista_recetas.filter(function (value) {
return value.nombre.toLowerCase().includes(self.search.toLowerCase());
});
},
},
methods: {
AgregarIngrediente: function () {
var new_date = new Date();
var ingrediente = {
id: "i1000" + new_date.getTime(),
nombre: this.nuevo_ingrediente,
};
this.new_receta.ingredientes.push(ingrediente);
this.nuevo_ingrediente = null;
},
resetForm() {
this.new_receta.id = "";
this.new_receta.nombre = "";
this.new_receta.descripcion = "";
this.new_receta.chef = "";
this.new_receta.ingredientes = [];
},
AgregarReceta: function () {
this.AgregarIngrediente();
var receta = { ...this.new_receta };
this.lista_recetas.push(receta);
console.log(receta);
console.log(this.lista_recetas);
this.resetForm();
},
},
};
</script>
<style>
</style>
-
{{ingrediente.nombre}
瓜达尔纽瓦酒店
导出默认值{
名称：“应用程序”，
数据（）{
返回{
列斯塔花园：[
{
id:“001”，
名称：“曼扎纳之星之星之星之星”（Receta de Tarta de manzana sin azúcar），
描述：
“曼扎纳河和佩拉河流域。大峡谷和火地岛的Trocea河和卡内拉河流域的Trocea河。在卡内拉河流域，下一个火地岛，在20-30分钟内到达曼扎纳河流域。”，
厨师：“伊莎贝尔·雷萨尔沃”，
英格瑞登斯：[
{
id:“i001”，
名称：“3个曼扎纳斯大教堂”，
},
{
id:“i002”，
名称：“1卡内拉宫”，
},
{
id:“i003”，
名称：“1普拉塔诺·马杜罗”，
},
],
},
{
id:“002”，
名称：“Carlota de mango”，
描述：
“索莱蒂拉山的比兹科霍斯角超过了古尔达拉山。这里有一个芒果加莱塔斯马里亚斯餐厅。”，
厨师：“伊莎贝尔·雷萨尔沃”，
英格瑞登斯：[
{
id:“i004”，
名称：“175格拉莫斯·德阿祖卡尔”，
},
{
id:“i005”，
名称：“环境温度2克拉斯”，
},
{
id:“i006”，
名称：“400格拉莫斯·德蒙塔·德莱切教堂”，
},
{
id:“i007”，
名称：“100格拉莫斯芒果troceado”，
},
],
},
{
id:“003”，
名称：“帕契塔馅饼”，
描述：
“在法律和程序方面，这是一个很好的选择。”，
厨师：“丹尼·莱昂”，
英格瑞登斯：[
{
id:“i008”，
名称：“3耶玛斯德胡埃沃”，
},
{
id:“i009”，
名称：“1 lata de leche condensada（397 grs）”，
},
],
},
{
id:“004”，
名称：“Dulce de leche reposteroa”，
描述：
“在法律和程序方面，这是一个很好的选择。”，
厨师：“卡罗莱纳。”，
英格瑞登斯：[
{
id:“i010”，
名称：“1 litro de leche entera”，
},
{
id:“i011”，
名称：“300格拉莫斯德阿祖卡尔（1½塔扎）”，
},
{
id:“i012”，
名称：“瓦尼拉埃森西亚1号”，
},
],
},
{
id:“005”，
名称：“梅尔梅拉达·德尼斯佩罗斯”，
描述：“Limpia los nísperos，quítales el hueso y la piel.”，
厨师：“蒙特莫罗特奥尔特加”，
英格瑞登斯：[
{
id:“i013”，
名称：“1公斤的nísperos sin piel y sin hueso”，
},
{
id:“i014”，
名称：“200格拉莫斯·德阿苏卡尔（1塔扎）”，
},
{
id:“i015”，
名称：“1特鲁佐·德利蒙”，
},
{
id:“i016”，
名称：“2个cucharadas soperas de agua”，
},
],
},
],
搜索：“，
显示添加接收：正确，
新收入：{
id:“”，
名称：“，
描述：“，
厨师长：“，
ingredientes:[]，
},
新墨西哥州：，
};
},
计算：{
lista_Recitas_filtrada:函数（）{
var self=这个；
返回此.lista_recetas.filter（函数（值））{
返回值.nombre.toLowerCase（）.includes（self.search.toLowerCase（））；
});
},
},
方法：{
AgregarIngrediente:函数（）{
var new_date=新日期（）；
var ingrediente={
id:“i1000”+新的\u日期.getTime（），
名字：这个，新英格里登特，
};
此.新接收项IngRedients.推送（ingrediente）；
this.nuevo_ingrediente=null；
},
重置表单（）{
this.new_receta.id=“”；
this.new_receta.nombre=“”；
this.new_receta.description=“”；
这是一个新的“receta.chef=”；
this.new_receta.ingredientes=[]；
},
AgregarReceta:函数（）{
这个。AgregarIngrediente（）；
var receta={…this.new_receta}；
这个.lista_recetas.push（receta）；
控制台日志（receta）；
console.log（this.lista_recetas）；
这是resetForm（）；
},
},
};
let objClone = { ...obj }; // pass all key:value pairs from an object
<template>
<div v-show="show_add_receta" style="padding-left: 2rem">
<p>
<input type="text" placeholder="id..." v-model="new_receta.id" />
</p>
<p>
<input type="text" placeholder="nombre..." v-model="new_receta.nombre" />
</p>
<p>
<textarea
type="text"
placeholder="descripcion..."
cols="30"
rows="10"
v-model="new_receta.descripcion"
></textarea>
</p>
<p>
<input type="text" placeholder="chef..." v-model="new_receta.chef" />
</p>
<p>
<input
type="text"
placeholder="ingredientes..."
v-model="nuevo_ingrediente"
@keyup.enter="AgregarIngrediente()"
/>
</p>
<ul>
<li v-for="ingrediente in new_receta.ingredientes" :key="ingrediente.id">
{{ ingrediente.nombre }}
</li>
</ul>
<p>
<button @click="AgregarReceta()">Guardar nueva receta</button>
</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
lista_recetas: [
{
id: "001",
nombre: "Receta de Tarta de manzana sin azúcar",
descripcion:
"Descorazona dos de las manzanas y pélalas. Trocea en cubos grandes y ponlos en una olla al fuego con la ramita de canela. Una vez hierva, baja un poco el fuego, tapa la olla y deja cocer entre 20-30 min o hasta que las manzanas estén tiernas.",
chef: "Isabel Rescalvo",
ingredientes: [
{
id: "i001",
nombre: " 3 manzanas grandes",
},
{
id: "i002",
nombre: " 1 rama de canela",
},
{
id: "i003",
nombre: "1 plátano maduro",
},
],
},
{
id: "002",
nombre: "Carlota de mango",
descripcion:
"Corta la punta de los bizcochos de soletilla sin excederte y guárdala. Recuerda que también puedes hacer la receta de carlota de mango con galletas Marías.",
chef: "Isabel Rescalvo",
ingredientes: [
{
id: "i004",
nombre: "175 gramos de azúcar",
},
{
id: "i005",
nombre: " 2 claras de huevo a temperatura ambiente",
},
{
id: "i006",
nombre: "400 gramos de nata para montar o crema de leche",
},
{
id: "i007",
nombre: "100 gramos de mango troceado",
},
],
},
{
id: "003",
nombre: "Pie de parchita",
descripcion:
"Tritura las galletas hasta hacerlas polvo en la licuadora o procesadora.",
chef: " Dani León.",
ingredientes: [
{
id: "i008",
nombre: " 3 yemas de huevo",
},
{
id: "i009",
nombre: " 1 lata de leche condensada (397 grs)",
},
],
},
{
id: "004",
nombre: "Dulce de leche reposteroa",
descripcion:
"Tritura las galletas hasta hacerlas polvo en la licuadora o procesadora.",
chef: "Carolina. ",
ingredientes: [
{
id: "i010",
nombre: " 1 litro de leche entera",
},
{
id: "i011",
nombre: " 300 gramos de azucar (1½ tazas)",
},
{
id: "i012",
nombre: " 1 cucharadita de esencia de vainilla",
},
],
},
{
id: "005",
nombre: "Mermelada de nísperos",
descripcion: "Limpia los nísperos, quítales el hueso y la piel..",
chef: " Montse Morote Ortega",
ingredientes: [
{
id: "i013",
nombre: " 1 kilogramo de nísperos sin piel y sin hueso",
},
{
id: "i014",
nombre: " 200 gramos de azúcar (1 taza)",
},
{
id: "i015",
nombre: "1 trozo de limón",
},
{
id: "i016",
nombre: "2 cucharadas soperas de agua",
},
],
},
],
search: "",
show_add_receta: true,
new_receta: {
id: "",
nombre: "",
descripcion: "",
chef: "",
ingredientes: [],
},
nuevo_ingrediente: "",
};
},
computed: {
lista_recetas_filtrada: function () {
var self = this;
return this.lista_recetas.filter(function (value) {
return value.nombre.toLowerCase().includes(self.search.toLowerCase());
});
},
},
methods: {
AgregarIngrediente: function () {
var new_date = new Date();
var ingrediente = {
id: "i1000" + new_date.getTime(),
nombre: this.nuevo_ingrediente,
};
this.new_receta.ingredientes.push(ingrediente);
this.nuevo_ingrediente = null;
},
resetForm() {
this.new_receta.id = "";
this.new_receta.nombre = "";
this.new_receta.descripcion = "";
this.new_receta.chef = "";
this.new_receta.ingredientes = [];
},
AgregarReceta: function () {
this.AgregarIngrediente();
var receta = { ...this.new_receta };
this.lista_recetas.push(receta);
console.log(receta);
console.log(this.lista_recetas);
this.resetForm();
},
},
};
</script>
<style>
</style>