1
簡單的問題
好了，我建了一個小程序來鍛鍊一下我目前與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內的索引來保存我在這個函數之外的東西？
哦，它也很好用，我發現你編寫計算屬性的方式更容易閱讀，但編輯時的標誌想法也有同樣的問題，它只適用於我只有一個元素的表，如果我有不止一個，所有其他保存按鈕將顯示！你有任何想法，我會如何讓它不？ –
抱歉忘記通知 –
糟糕！固定。編輯標誌必須指示哪一行正在被編輯。 –