javascript - 关于 Vue 和 Javascript 的简单问题

Question

好的，所以我构建了一个小应用程序来练习到目前为止我在 vue 中学到的东西，但是有些事情我想做但还不知道怎么做

<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/

编辑和保存按钮，我想隐藏编辑按钮并在单击编辑按钮时显示已保存的按钮，而在单击保存按钮时则相反。

编辑对象的性别值，我无法获得新的单选值(我点击编辑并选择一个新的后选中的)

如果没有行则隐藏表格，我可以通过将它与循环数组的大小进行比较来第一次做到这一点，但是当我删除行时，我不会从数组中删除对象，我只是更改状态，因此如果将一个对象添加到数组并将其删除，该行将消失(仅在状态 = true 时显示)但表不会(因为即使没有行，该对象仍然存在于数组中)

有人可以帮助我了解如何实现这一目标吗？

编辑:用我们目前得到的更新代码:

https://jsfiddle.net/myrgato/rcj3kef7/

如您所见，如果我向表中添加两项，并编辑一项，所有行都显示保存按钮，我如何才能只显示我单击的行的保存按钮？

还有一个，检查以下代码:https://jsfiddle.net/myrgato/rcj3kef7/1/

在这一个中，我将保存按钮放在表格之外，在表单本身中，因此当用户单击一行上的编辑时，保存按钮和当前值会显示在表单上。

问题是，我如何将 v-for 内部的索引传递给外部的 saveThis 函数？

Answer 1

您想拥有一个编辑模式。当您处于编辑模式时，保存按钮出现，编辑按钮消失；否则，相反。这只是一个变量，您设置为正在编辑的行的索引，或者在不编辑时为 null。

用于在 dataToArray 和 savedData 之间复制值，Object.assign很方便。

由于您希望在表为空时隐藏表，并且在没有具有真正的 status 成员的项目时表为空，因此创建一个使用 find 的计算告诉你是否有任何此类元素。

new Vue({
  el: '#app',
  data: {
    dataToArray: {
      id: null,
      name: '',
      sex: '',
      color: '',
      status: true
    },
    savedData: [],
    editing: false
  },
  computed: {
    hasVisibleData() {
      return this.savedData.find(d => d.status);
    }
  },
  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) {
      this.editing = index;
      Object.assign(this.dataToArray, this.savedData[index]);
    },
    saveEdit(index) {
      this.editing = null;
      Object.assign(this.savedData[index], this.dataToArray);
    }
  }
});

.jumbotron {
  background-color: ;
}

label {
  color: ;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<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="hasVisibleData">
        <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 v-if="editing!==index" @click="editThis(index)" class="btn btn-warning">Edit</button>
              <button v-if="editing===index" @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>