1

Tenho uma instância do Vue no qual pego valores de um formulario para enviar por ajax, gostaria de limpar os dados guardados pelas v-models de uma só vez após o envio, isso é possível?

new Vue({
el: '#app',
data: {
    campo1: "",
},
methods:{
    saveForm:function() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                //document.getElementById("demo").innerHTML = this.responseText;
                alert(this.responseText);                   
            }
        };
        xhttp.open("POST", "helpers/get_campo.php", true);
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhttp.send(
            "campo1="+this.campo1
        );
            this.campo1 = "";
    }
}
2
  • Coloca o teu código que faz a chamada ajax sff. Está dentro do mesmo componente certo?
    – Miguel
    17/01/2018 às 17:57
  • Na situação real eu tenho vários campo, gostaria de limpar eles após chamar o método saveForm(). 17/01/2018 às 18:05

2 Respostas 2

3

Você terá que limpar um por um, mas uma opção é colocar os atributos do form dentro de objeto separado no data. Assim, você acessa eles por this.fields.campo1 etc.., e pode iterar o objeto limpando somente os campos que você quer:

new Vue({
  el: '#app',
  data: {
    campo_xx: '',
    fields: {
      campo1:"",
      campo2:"",
    }
  },
  methods: {
    saveForm () {
      http.post(url, this.fields)
        .then(response => {
          limpaForm()
        })
    },
    limpaForm () {
      for (field in this.fields) this.fields[field] = ""
    }
  }
})
2
  • Legal sua solução, o vue não tem nada dele mesmo para isso? 17/01/2018 às 18:11
  • Não, pelo menos até onde sei, ele não diferencia dos objetos no escopo this são de dados ou não, literais ou funções... 17/01/2018 às 18:15
0

Você poderia fazer com o código abaixo

for (field in this.object) this.object[field] = ''

Mas se você tem um array, objeto ou número no escopo, ele será substituído por string(' '). Resolvendo este problema, poderá fazer com o código abaixo.

for(let value in this.object) {
        switch (typeof this.object[value]) {
            case 'string':
                this.object[value] = '';
                break;
            case 'number':
                this.object[value] = 0
                break;
            case 'object':
                  Array.isArray(this.object[value]) ? this.object[value] = [] : this.object[value] = {}
                break;
            default:

        }
    }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .