Stiv Anthony
Stiv Anthony
Vue.js
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
Stiv Anthony (0 xp)
lo siento por mi edición es mi primera vez preguntando