Comparte:
Resetear los valores de un componente en VUE
Buenas, quisiera saber como podria resetear los datos de un componente y tengo la siguiente vista Product.vue:
<template>
<div>
<div class="card">
<div class="card-header border-0">
<h3 class="card-title">Productos</h3>
<div class="card-tools">
<a href="#" class="btn btn-tool btn-sm">
<i class="fas fa-download"></i>
</a>
<a href="#" class="btn btn-tool btn-sm">
<i class="fas fa-bars"></i>
</a>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<create-product-component></create-product-component>
<div class="form-check">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
};</script>
y llamó al componente create-product-component que contiene un botón que activa el modal :
<template >
<div>
<b-button variant="success" @click="show = true">CREANDO PRODUCTO</b-button>
<b-modal
v-model="show"
title="Crea Tu Producto"
size="xl"
:header-bg-variant="headerBgVariant"
:header-text-variant="headerTextVariant"
:body-bg-variant="bodyBgVariant"
:body-text-variant="bodyTextVariant"
:footer-bg-variant="footerBgVariant"
:footer-text-variant="footerTextVariant"
>
<b-container fluid>
<div id="seccion1">
<div class="form-group row">
<label for="name" class="col-sm-3 col-form-label">NOMBRE:</label>
<div class="col-sm-9">
<b-form-input
v-model="$v.product_name.$model"
type="text"
placeholder="NOMBRE DEL PRODUCTO"
style="text-transform: uppercase"
:state="$v.product_name.$dirty ? !$v.product_name.$error : null"
></b-form-input>
<div v-if="!!mensage.name">
<b-icon
icon="exclamation-circle-fill"
variant="warning"
></b-icon>
<strong>{{ mensage.name }}</strong>
</div>
<b-form-invalid-feedback v-if="!$v.product_name.required">
Este campo es requerido!!
</b-form-invalid-feedback>
<b-form-invalid-feedback v-if="!$v.product_name.minLength">
El nombre debe tener al menos
{{ $v.product_name.$params.minLength.min }}
letras
</b-form-invalid-feedback>
</div>
</div>
<div class="form-group row">
<label for="description" class="col-sm-3 col-form-label"
>DESCRIPCIÓN:</label
>
<div class="col-sm-9">
<b-form-input
type="text"
style="text-transform: uppercase"
placeholder="DESCRIPCIÓN DEL PRODUCTO"
v-model="$v.product_description.$model"
:state="
$v.product_description.$dirty
? !$v.product_description.$error
: null
"
>
</b-form-input>
<b-form-invalid-feedback v-if="!$v.product_description.required">
Este campo es requerido!!
</b-form-invalid-feedback>
</div>
</div>
</div>
<hr />
<div id="seccion2">
<insert-barcode-component></insert-barcode-component>
<list-inserted-barcodes-component
:barcodes_errors="mensage.barcodes"
></list-inserted-barcodes-component>
</div>
<hr />
<div id="seccion3">
<div class="form-group row">
<label for="" class="col-sm-3 col-form-label">MARCA:</label>
<div class="col-sm-6">
<vue-select
label="name"
:taggable="true"
:options="brands"
@input="setBrandName"
:value="brand_select"
>
</vue-select>
</div>
</div>
<div class="form-group row">
<label for="" class="col-sm-3 col-form-label">CATEGORIA:</label>
<div class="col-sm-6">
<vue-select
label="name"
@input="setCategoryName"
:taggable="true"
:options="categorys"
:value="category_select"
>
</vue-select>
</div>
</div>
</div>
<!-- {{ this.mensage }} -->
<!-- {{ this.$store.state }} -->
</b-container>
<template #modal-footer>
<div class="w-100">
<b-button
variant="secondary"
size="sm"
class="float-left"
@click="show = false"
>
Close
</b-button>
<b-button
variant="primary"
@click="submit"
class="float-right"
v-if="barcode_inserted.length > 0"
>
Crear
</b-button>
</div>
<div class="w-100">
{{ $store.state }}
</div>
</template>
</b-modal>
</div>
</template>
<script>
import { required, minLength, between } from "vuelidate/lib/validators";
import { mapGetters, mapState, mapMutations, mapActions } from "vuex";
export default {
data() {
return {
show: false,
headerBgVariant: "secondary",
headerTextVariant: "light",
bodyBgVariant: "light",
bodyTextVariant: "dark",
footerBgVariant: "secondary",
footerTextVariant: "light",
product_name: "",
product_description: "",
mensage: {
name: "",
barcodes: [],
},
brands: [
{
name: "",
description: "",
},
],
categorys: [
{
name: "",
description: "",
},
],
};
},
mounted() {
console.log("Componente CreateProduct montado correctamente!");
axios
.get("/category")
.then((response) => {
this.categorys = response.data;
})
.catch((err) => {
console.log(err);
});
axios
.get("/brand")
.then((response) => {
this.brands = response.data;
})
.catch((err) => {
console.log(err);
});
},
computed: {
...mapGetters({
// product_creating: "getProduct",
barcode_inserted: "getBarcodes",
brand_select: "getBrandName",
category_select: "getCategoryName",
}),
},
validations: {
product_name: { required, minLength: minLength(4) },
product_description: { required, minLength: minLength(4) },
},
methods: {
submit() {
const param = {
name: this.product_name,
description: this.product_description,
barcodes: this.barcode_inserted,
brand_select: this.brand_select,
category_select: this.category_select,
};
console.log("Respuesta del product por metodo post");
axios
.post("/product", param)
.then((response) => {
const Swal = require("sweetalert2");
Swal.fire("Good job!", "You clicked the button!", "success");
this.productReset();
this.product_name = "";
this.product_description = "";
this.show = false;
console.log(response);
})
.catch((err) => {
this.mensage.name = "";
this.mensage.barcodes = [];
for (const key in err.response.data.errors) {
if (err.response.data.errors.hasOwnProperty(key)) {
const element = err.response.data.errors[key];
console.log(key + "<= comparando con =>" + "name");
const elemento_substraido = JSON.parse(
JSON.stringify(element[0])
);
if (key === "name") {
this.mensage[key] = elemento_substraido;
}
console.log(
"Mostrando elemento substraido: " + elemento_substraido
);
var cadena = key,
separador = ".", // un espacio en blanco
limite = 2,
arregloDeSubCadenas = cadena.split(separador, limite);
if (arregloDeSubCadenas[0] === "barcodes") {
this.mensage.barcodes.push(
JSON.parse(JSON.stringify(arregloDeSubCadenas[1]))
);
const parametro = {
ubi: JSON.parse(JSON.stringify(arregloDeSubCadenas[1])),
mensage: elemento_substraido,
};
this.setBarcodeMensage(parametro);
}
console.log(key);
console.log(elemento_substraido);
}
}
console.log(this.mensage);
});
},
...mapMutations([
"setBrandName",
"setCategoryName",
"setBarcodeMensage",
"productReset",
]),
},
};
</script>
lo que quiero es que desde el componen create-product-component se restablezca todo el componente de este mismo, y bueno eso seria todo espero su ayuda y ante todo gracias y saludos sus video son geniales.
Stiv Anthony (390 xp)
lo siento por mi edición es mi primera vez preguntando