title: Simple questions regarding Vue and Javascript
body: <p>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</p>
  
  <pre><code>&lt;div class="container" id="app"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-6 jumbotron"&gt;
        &lt;form class="form-horizontal" @submit.prevent&gt;
          &lt;p&gt;
            &lt;label&gt;Name&lt;/label&gt;
            &lt;input id="inputName" type="text" class="form-control" v-model="dataToArray.name"&gt;
          &lt;/p&gt;
          &lt;p&gt;
            &lt;label&gt;Sex&lt;/label&gt;
            &lt;input type="radio" name="sex" value="male" v-model="dataToArray.sex"&gt; Male
            &lt;input type="radio" name="sex" value="female" v-model="dataToArray.sex"&gt; Female
          &lt;/p&gt;
          &lt;p&gt;
            &lt;label&gt;Select a Color&lt;/label&gt;
            &lt;select id="selectColor" class="form-control" v-model="dataToArray.color"&gt;
              &lt;option value="red"&gt;Red&lt;/option&gt;
              &lt;option value="blue"&gt;Blue&lt;/option&gt;
            &lt;/select&gt;
          &lt;/p&gt;
          &lt;p&gt;
            &lt;button class="btn btn-primary" @click="addToArray()"&gt;Add to Array&lt;/button&gt;
         &lt;/p&gt;
        &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-6"&gt;
        &lt;table id="table" class="table table-bordered" v-if="savedData.length &gt; 0"&gt;
          &lt;thead&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th&gt;Sex&lt;/th&gt;
            &lt;th&gt;Color&lt;/th&gt;
            &lt;th&gt;&lt;/th&gt;
          &lt;/thead&gt;
          &lt;tbody id="test"&gt;
            &lt;tr v-for="(data, index) in savedData" v-if="savedData[index].status"&gt;
              &lt;td&gt;{{ data.name }}&lt;/td&gt;
              &lt;td&gt;{{ data.sex }}&lt;/td&gt;
              &lt;td&gt;{{ data.color }}&lt;/td&gt;
              &lt;td class="text-center"&gt;
                &lt;button @click="editThis(index)" class="btn btn-warning"&gt;Edit&lt;/button&gt;
                &lt;button @click="saveEdit(index)" class="btn btn-default"&gt;Save&lt;/button&gt;
                &lt;button class="btn btn-danger" @click="deleteThis(index)"&gt;Delete&lt;/button&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
        {{ dataToArray.id }} &lt;br&gt;
        {{ dataToArray.name }} &lt;br&gt;
        {{ dataToArray.sex }} &lt;br&gt;
        {{ dataToArray.color }} &lt;br&gt;
        {{ savedData }}
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  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
      }
    }
  });
  </code></pre>
  
  <p>This is the app:<a href="https://jsfiddle.net/myrgato/10uqa1e1/5/" rel="nofollow noreferrer">https://jsfiddle.net/myrgato/10uqa1e1/5/</a></p>
  
  <p>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.</p>
  
  <p>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)</p>
  
  <p>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)</p>
  
  <p>Can someone help me understand how to achieve this?</p>
  
  <p>Edit: Updated the code with what we got so far:</p>
  
  <p><a href="https://jsfiddle.net/myrgato/rcj3kef7/" rel="nofollow noreferrer">https://jsfiddle.net/myrgato/rcj3kef7/</a></p>
  
  <p>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?</p>
  
  <p>and another one, check the following code:  <a href="https://jsfiddle.net/myrgato/rcj3kef7/1/" rel="nofollow noreferrer">https://jsfiddle.net/myrgato/rcj3kef7/1/</a></p>
  
  <p>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.</p>
  
  <p>The problem is, how will i get the index thats inside the v-for to my saveThis function that is outside?</p>