我和學生有一個陣列。
我已經實作了學生的加法。
問：按場后如何清理？必須清理欄位，以便在您嘗試輸入新值時不會將其設定為舊值。
嘗試了一切，沒有任何效果。無論是<form>-><button type = "reset">還是選擇器...
可以做些什么來解決這個問題？
索引.html
......
<!-- add new student -->
<br>
<input v-model="students.name" placeholder="surname">
<select v-model="students.group">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input v-model="students.year" placeholder="Bitrh year">
<input type="checkbox" v-model="students.done">
<label>done</label>
<input v-model.number="students.mark" type="number" placeholder="mark">
<button type="reset" @click="addStudent()">add to array</button>
</div>
<!-- /add new student -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="/index.js"></script>
索引.js
let students = [
{
id: '1',
name: "Test",
group: "1",
year: "1985",
done: true,
mark: 4,
},
]
var app = new Vue ({
el: '#app',
data: {
students: [],
search: '',
stud: students.slice(),
},
methods: {
deleteStudent(studId) {
this.stud = this.stud.filter(elem => {
return elem.id != studId;
});
},
addStudent() {
const id = this.stud.length 1;
this.stud.push({ id, ...this.students });
}
}
})
uj5u.com熱心網友回復：
我不知道 vue，但您始終可以選擇所有輸入并將其值設定為 '' ：
document.querySelectorAll('input').forEach(input => input.value='')
在最好的情況下，將它應用到容器中，就像這樣：
document.querySelector('.formClassName').querySelectorAll('input').forEach(input => input.value='')
uj5u.com熱心網友回復：
只需使用以下內容：
deleteStudent(studId) {
this.stud.splice(students.id, 1)
}
你可以splice根據它的 id 逗號后面的 1 來做一些事情，它會從你的 id 中洗掉 1 個螺柱資料。
uj5u.com熱心網友回復：
當您想在表單上使用 v-model 并讓用戶輸入一些資料時，您應該將初始物件傳遞給您的輸入。當用戶提交表單時，您會將push這些資料添加到您的陣列中，然后重置您的初始物件。
所以這個實作將幫助你：
<!-- add new student -->
<br>
<input v-model="initialState.name" placeholder="surname">
<select v-model="initialState.group">
<option value="1">1</option>
<option value="2">2</option>
</select>
<input v-model="initialState.year" placeholder="Bitrh year">
<input type="checkbox" v-model="initialState.done">
<label>done</label>
<input v-model.number="initialState.mark" type="number" placeholder="mark">
<button type="reset" @click="addStudent()">add to array</button>
</div>
<!-- /add new student -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="/index.js"></script>
var app = new Vue ({
el: '#app',
data: {
students: [],
initialState: {
id: '',
name: '',
group: '',
year: '',
done: true,
mark: 0
},
search: '',
},
methods: {
deleteStudent(studId) {
this.students = this.students.filter(elem => {
return elem.id != studId;
});
},
addStudent() {
const id = this.students.length 1;
this.students.push({ id, this.initialState });
this.initialState = JSON.parse(JSON.stringify({
id: '',
name: '',
group: '',
year: '',
done: true,
mark: 0
}));
}
}
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/353948.html
標籤：javascript html Vue.js