$refs resetFields 不是 function AntDesign

Question

I have a problem with reseting fields of my form.

I have a form. The user can adding another forms and another...

If everything is OK, I would like to recording data in my DB and in my store AND reset all of inputs of my form. This is this last point I cannot do.

I have tried different solutions but It does not work.

This is my code:

      <div v-for="(question, index) in questionsSignaletiques" :key="index" class="blockQuestion" >
            <!--form to add questions : one form per question, each form have a different name in the ref -->
            <a-form-model
              layout="inline"
              :ref="'p' + index"
            >

              <p>New question</p>

              <a-alert v-if="question.error.here" type="error" :message="question.error.message" show-icon />

              <a-form-model-item>
                <a-input v-model="question.question.type" placeholder="Title">
                </a-input>
              </a-form-model-item>

              <a-form-model-item>
                <a-input v-model="question.question.item" placeholder="Item">
                </a-input>
              </a-form-model-item>

              <br><br>
              <a-form-model-item label="Question multiple" prop="delivery">
                <a-switch v-model="question.question.multiple"  />
              </a-form-model-item>
              <a-form-model-item label="Obligatoire" prop="delivery">
                <a-switch v-model="question.question.obligatoire"  />
              </a-form-model-item>

              <br><br>

              <div class="blockChoices">
                <div v-for="subrow in question.question.choices">
                  <a-form-model-item>
                    <a-input v-model="subrow.name"  placeholder="Choix">
                    </a-input>
                  </a-form-model-item>
                </div>
              </div>
              <a-button @click="addChoice(question)" type="secondary">Add a choice</a-button>
          </a-form-model>
      </div>

      <div>
        <a-button @click="addItem" type="secondary">Add a question</a-button>
      </div>
      <br>

      <div>
        <a-button @click="submit" type="primary">Send</a-button>
      </div>

Javascript code:

  data() {
    return {
      idStudy: this.$route.params.id,
      aucuneQuestion:false,
      questionsSignaletiques: [
        {
          "study":"/api/studies/" + this.$route.params.id,
          "question":
            {
              type: "",
              item: "",
              multiple: false,
              obligatoire: false,
              inverse: false,
              barometre: false,
              originale: false,
              signaletik: true,
              choices: [{name:''}]
            },
            "error": {
            message:"",
              here:false
            }
        }
      ],

    }
  },

  mounted() {
//retreive all the questions still recorded
    axios
      .get('http://127.0.0.1:8000/api/studies/' + this.idStudy + '/question_studies?question.signaletik=true')
      .then((result)=>{
        console.log(result.data["hydra:member"])

        this.aucuneQuestion = result.data["hydra:member"].length === 0;

        //on met les données dans le store
        this.$store.commit("setListeQuestionsSignaletiques", result.data["hydra:member"])


      })
      .catch(err=>console.log(err))

  },



  methods: {
//Adding a question
    addItem () {
      this.questionsSignaletiques.push(
        {
          "study":"/api/studies/" + this.idStudy,
          "question":
            {
              type: "",
              item: "",
              multiple: false,
              obligatoire: false,
              inverse: false,
              barometre: false,
              originale: false,
              signaletik: true,
              choices: [{name:''}]
            },
          "error": {
            message:"",
            here:false
          }
        }
      )
    },

//adding a choice

    addChoice: function(choice) {
      choice.question.choices.push({
        name: ''
      })
    },

    // Sending the forms

    submit () {

     //loop table to retrieve all questions and indexes if the user adding several questions

      this.questionsSignaletiques.forEach((element,index) => 
      {

        const inputType = element.question.type
        const inputItem = element.question.item
        const inputChoice = element.question.choices


        //loop on choices to see if empty one or not 
        for (const oneChoice of inputChoice)
        {

          if ((inputChoice.length == 1) ||(inputChoice.length == 2 && oneChoice.name == ""))
          {
            element.error.here=true
            element.error.message = "You must have two choices at least"
            return false; // stop here if error
          }
          else
          {}
        }// end loop of choices

       // verify other fields

        if (inputType == "" || inputItem =="")
        {
          element.error.here=true
          element.error.message = "Title and item must not be empty"
        }
        else
        {
          // everything is ok we can record in db and store


          //reset fields == does not work

          this.$refs['p' + index][0].fields.resetField()
          //this.$refs['p' + index][0].resetFields();



          // adding questions in db one by one 
/*
            axios
              .post('http://127.0.0.1:8000/api/question_studies', element)
              .then((result)=>{
                console.log(result)


                //add in the state
                this.$store.commit("addQuestionSignaletique", element)



              })
              .catch(error => {
                console.log("ERRRR:: ",error);
              });
*/



        }




      }) //end loop foreach

    }
  }
};

Thanks a lot for help

EDIT AFTER THE FIRST ANSWER

Ok I didn't know. So I changed my mind: I added a "show" in my "data" which is true at the beginning. If everything is ok, I save the question and set the show to false.

The problem now is that when I have a question that is OK and the other one that is not. When I correct the question that was not ok and save it, BOTH questions go into the STATE. So there is a duplicate in my state AND my DB... What can I do? This is the code:

I just added this in the HTML:

<div v-for="(question, index) in questionsSignaletiques" :key="index"  >
            <a-form-model
              layout="inline"
              v-if="question.show"
              class="blockQuestion"
            >
...

  data() {
    return {
      idStudy: this.$route.params.id,
      aucuneQuestion:false,
      questionsSignaletiques: [
        {
          "study":"/api/studies/" + this.$route.params.id,
          "question":
            {
              type: "",
              item: "",
              multiple: false,
              obligatoire: false,
              inverse: false,
              barometre: false,
              originale: false,
              signaletik: true,
              choices: [{name:''}]
            },
          "error": {
              message:"",
              here:false
            },
          "show":true,
        }
      ],
    }
  },

  mounted() {

//retrieve question still recorded
    axios
      .get('http://127.0.0.1:8000/api/studies/' + this.idStudy + '/question_studies?question.signaletik=true')
      .then((result)=>{
        console.log(result.data["hydra:member"])

        this.aucuneQuestion = result.data["hydra:member"].length === 0;

        
        this.$store.commit("setListeQuestionsSignaletiques", result.data["hydra:member"])


      })
      .catch(err=>console.log(err))

  },

  methods: {

//adding a question

    addItem () {
      this.questionsSignaletiques.push(
        {
          "study":"/api/studies/" + this.idStudy,
          "question":
            {
              type: "",
              item: "",
              multiple: false,
              obligatoire: false,
              inverse: false,
              barometre: false,
              originale: false,
              signaletik: true,
              choices: [{name:''}]
            },
          "error": {
            message:"",
            here:false
          },
          "show":true
        }
      )
    },

//adding a choice

    addChoice: function(choice) {
      choice.question.choices.push({
        name: ''
      })
    },

    // submit the form
     submit () {


      this.questionsSignaletiques.forEach((element,index) =>
      {
          const inputType = element.question.type
          const inputItem = element.question.item
          const inputChoice = element.question.choices


          for (const oneChoice of inputChoice)
          {

            if ((inputChoice.length == 1) ||(inputChoice.length == 2 && oneChoice.name == ""))
            {
              element.error.here=true
              element.error.message = "You must have two choices at least"
              return false; //on s'arrête là si il y a une erreur
            }
            else
            {
              console.log("no problem")
            }
          }



          if (inputType == "" || inputItem =="")
          {
            element.error.here=true
            element.error.message = "You must fill type and item"
          }
          else
          {

            // hide the question form
            element.show =false

         //adding in db

            axios
              .post('http://127.0.0.1:8000/api/question_studies', element)
              .then((result)=>{

                //add in the state

                this.$store.commit("addQuestionSignaletique", element)


              })

              .catch(error => {
                console.log("ERRRR:: ",error);
              });



          }




      }) //end loop foreach

    }
  }
};

Thanks for help !

Answer 1

form.reset() does not work when using v-model.

Reset the reactive data instead.

reset() {
    this.question.question.type = ""
    ...
    ...
}