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内的索引来保存我在这个函数之外的东西？
哦，它也很好用，我发现你编写计算属性的方式更容易阅读，但编辑时的标志想法也有同样的问题，它只适用于我只有一个元素的表，如果我有不止一个，所有其他保存按钮将显示！你有任何想法，我会如何让它不？ –
抱歉忘记通知 –
糟糕！固定。编辑标志必须指示哪一行正在被编辑。 –