如何解决$refs resetFields 不是函数 AntDesign
我在重置表单字段时遇到问题。
如果一切正常，我想在我的数据库和我的商店中记录数据并重置我表单的所有输入。这是我不能做的最后一点。
我尝试了不同的解决方案，但它不起作用。
这是我的代码：
<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,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,"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",methods: {
//adding a question
addItem () {
this.questionsSignaletiques.push(
{
"study":"/api/studies/" + this.idStudy,here:false
},"show":true
}
)
},// 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
}
}
};
感谢您的帮助！
解决方法
form.reset() 在使用 v-model 时不起作用。
改为重置反应性数据。
reset() {
this.question.question.type = ""
...
...
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
