0

我在重置表单字段时遇到问题。

我有一个表格。用户可以添加另一个表单和另一个...

如果一切正常,我想在我的数据库和商店中记录数据并重置表单的所有输入。这是我不能做的最后一点。

我尝试了不同的解决方案,但它不起作用。

这是我的代码:

      <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代码:

  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

    }
  }
};

非常感谢您的帮助

在第一个答案后编辑

好吧,我不知道。所以我改变了主意:我在我的“数据”中添加了一个“显示”,这在开始时是正确的。如果一切正常,我会保存问题并将显示设置为 false。

现在的问题是,当我有一个可以的问题而另一个不可以的问题时。当我纠正不正确的问题并将其保存时,两个问题都会进入状态。所以在我的州和我的数据库中有重复...我该怎么办?这是代码:

我刚刚在 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

    }
  }
};

感谢帮助 !

4

1 回答 1

0

form.reset()使用 v-model 时不起作用。

而是重置反应数据。

reset() {
    this.question.question.type = ""
    ...
    ...
}
于 2021-04-15T18:59:35.623 回答