好了,我建了一個小程序來鍛鍊一下我目前與VUE教訓,但那裏有一些事情,我想做的事情,但不知道如何還關於Vue公司和Javascript
<div class="container" id="app">
<div class="row">
<div class="col-xs-6 jumbotron">
<form class="form-horizontal" @submit.prevent>
<p>
<label>Name</label>
<input id="inputName" type="text" class="form-control" v-model="dataToArray.name">
</p>
<p>
<label>Sex</label>
<input type="radio" name="sex" value="male" v-model="dataToArray.sex"> Male
<input type="radio" name="sex" value="female" v-model="dataToArray.sex"> Female
</p>
<p>
<label>Select a Color</label>
<select id="selectColor" class="form-control" v-model="dataToArray.color">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
</p>
<p>
<button class="btn btn-primary" @click="addToArray()">Add to Array</button>
</p>
</form>
</div>
<div class="col-xs-6">
<table id="table" class="table table-bordered" v-if="savedData.length > 0">
<thead>
<th>Name</th>
<th>Sex</th>
<th>Color</th>
<th></th>
</thead>
<tbody id="test">
<tr v-for="(data, index) in savedData" v-if="savedData[index].status">
<td>{{ data.name }}</td>
<td>{{ data.sex }}</td>
<td>{{ data.color }}</td>
<td class="text-center">
<button @click="editThis(index)" class="btn btn-warning">Edit</button>
<button @click="saveEdit(index)" class="btn btn-default">Save</button>
<button class="btn btn-danger" @click="deleteThis(index)">Delete</button>
</td>
</tr>
</tbody>
</table>
{{ dataToArray.id }} <br>
{{ dataToArray.name }} <br>
{{ dataToArray.sex }} <br>
{{ dataToArray.color }} <br>
{{ savedData }}
</div>
</div>
</div>
new Vue({
el: '#app',
data:{
dataToArray: {
id: null,
name: '',
sex: '',
color: '',
status: true
},
savedData: []
},
methods: {
addToArray(){
this.dataToArray.id = this.savedData.lenth;
this.savedData.push(Object.assign({}, this.dataToArray));
},
deleteThis(index){
this.savedData[index].status = false;
},
editThis(index, event){
document.getElementById("inputName").value = this.savedData[index].name;
document.getElementById("selectColor").value = this.savedData[index].color;
//check the form radio according to the current sex of the object
},
saveEdit(index){
this.savedData[index].name = document.getElementById("inputName").value;
this.savedData[index].color = document.getElementById("selectColor").value;
//this.savedData[index].sex = get the new radio value
}
}
});
這是應用程序:https://jsfiddle.net/myrgato/10uqa1e1/5/
編輯和保存按鈕,我想隱藏編輯按鈕,然後向保存按鈕被點擊編輯按鈕時,當週圍的保存按鈕otherway被點擊。
編輯對象的性別價值,我不能得到新的無線電值(選中一個後,我點擊編輯,並選擇一個新的)
隱藏的表,如果沒有行,我能夠在第一次通過比較循環數組的大小來做到這一點,但是當我刪除行時,我不會從數組中刪除對象,我只是改變狀態,所以如果將一個對象添加到數組並刪除它,該行將消失(僅當status = true時才顯示),但表不會(因爲即使tho沒有行,對象仍然存在於數組內)
有人可以幫助我理解如何實現此目的嗎?
編輯:更新的代碼與我們這麼遠:
https://jsfiddle.net/myrgato/rcj3kef7/
正如你所看到的,如果我兩個項目添加到表,並編輯之一,所有的行顯示的保存按鈕,我怎樣才能顯示我點擊的行的保存按鈕?
和另外一個,請檢查下面的代碼:https://jsfiddle.net/myrgato/rcj3kef7/1/
在這其中,我把保存按鈕在表外,其形式本身,所以當用戶點擊一個行編輯,保存按鈕和當前值顯示在窗體上。
問題是,我將如何得到v-for內的索引來保存我在這個函數之外的東西?
哦,它也很好用,我發現你編寫計算屬性的方式更容易閱讀,但編輯時的標誌想法也有同樣的問題,它只適用於我只有一個元素的表,如果我有不止一個,所有其他保存按鈕將顯示!你有任何想法,我會如何讓它不? –
抱歉忘記通知 –
糟糕!固定。編輯標誌必須指示哪一行正在被編輯。 –