Ok, so i built a little app to exercise what i've learned so far with vue, but theres some things that i want to do but have no idea HOW yet
<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
}
}
});
This is the app:https://jsfiddle.net/myrgato/10uqa1e1/5/
The edit and save button, i wanted to hide the edit button and show the saved button when the edit button is clicked, and the otherway around when the save button is clicked.
Editing the sex value of the object, i cant get the new radio value (the checked one after i click edit and select a new one)
Hiding the table if there are no rows, i am able to do that at the first time by comparing it to the size of the looping array, but when i delete rows, i dont delete the objects from the array, i just change the status, so if add one object to the array and delete it, the row will be gone (shows only if status = true) but the table will not (because even tho there are no rows, the object still exists inside the array)
Can someone help me understand how to achieve this?
Edit: Updated the code with what we got so far:
https://jsfiddle.net/myrgato/rcj3kef7/
As you can see, if i add two items to the table, and edit ONE, all the rows show the save button, how can i only show the save button of the row that i clicked?
and another one, check the following code: https://jsfiddle.net/myrgato/rcj3kef7/1/
In this one, i put the save button outside the table, in the form itself, so when the user clicks edit on a row, the save button and the current values show on the form.
The problem is, how will i get the index thats inside the v-for to my saveThis function that is outside?
