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

编辑并保存按钮，我想隐藏编辑按钮，并在单击编辑按钮时显示已保存的按钮，以及单击保存按钮时的其他按钮。

编辑对象的性别值，我无法获得新的无线电值（点击编辑后选中一个新的无线电值）

如果没有行隐藏表，我可以在第一时间将它与循环数组的大小进行比较，但是当我删除行时，我不删除数组中的对象，我只是更改状态，所以如果将一个对象添加到数组并删除它，该行将消失（仅在status = true时显示）但表不会（因为即使没有行，该对象仍然存在于数组中）

有人可以帮我理解如何实现这个目标吗？

编辑：使用我们到目前为止所获得的代码更新了代码：

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

正如您所看到的，如果我向表中添加两个项目并编辑ONE，则所有行都显示保存按钮，我怎么才能显示我单击的行的保存按钮？

和另一个，请检查以下代码：https://jsfiddle.net/myrgato/rcj3kef7/1/

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

问题是，如何将v-for中的索引转到我外面的saveThis函数？

Answer 1

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

要在dataToArray和savedData之间复制值，Object.assign非常方便。

由于您希望在表格为空时隐藏该表格，并且在没有具有真正status成员的项目时该表格为空，请创建使用find的计算机告诉你是否有这样的物品。

＆＃13;

＆＃13;

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);
    }
  }
});

＆＃13;

.jumbotron {
  background-color: ;
}

label {
  color: ;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可能希望在单击其中一个或另一个时设置一个标记，这样您就可以相应地更改它们。

public void ConfigureServices(IServiceCollection services)
{
    services.AddDataProtection()
        .PersistKeysToAzureBlobStorage(new Uri("<blob URI including SAS token>"));
}

然后在你的模板中你想要一个＆＃34; v-if＆＃34;根据旗帜的价值显示和隐藏的属性。

new Vue ({
    data: {
        edit:[] //0 means that neither button is clicked.
    },
    methods:{
        editThis(index, event){

            this.edit[index] = 1;

            this.dataToArray.name = this.savedData[index].name;
            this.dataToArray.color = this.savedData[index].color;
            this.dataToArray.color = this.saveData[index].sex;
    },
    saveEdit(index){

        this.edit[index] = -1

        this.savedData[index].name = this.dataToArray.name
        this.savedData[index].color = this.dataToArray.color
        this.savedData[index].sex = this.dataToArray.sex
        //since we have bound the dataToArray values with v-model we can modify them from here.
   },
   addToArray(index){
       this.dataToArray.id = this.savedData.lenth;
       this.edit[index] = 0;
       this.savedData.push(Object.assign({}, this.dataToArray));
   },
})

此外，为了在没有数据时隐藏表，您还必须在表本身上使用v-if。您还可以执行一个计算，它返回数组中返回状态不等于false的元素数。

<button @click="editThis(index)" v-if="edit[index] && edit[index] > -1" class="btn btn-warning">Edit</button>
<button @click="saveEdit(index)" v-if='edit[index] && edit[index] < 1' class="btn btn-default">Save</button>

然后在您的模板中，您可以像这样放置表格元素：

new Vue({
  computed:{
    elements(){//using the ES6 arrow function syntax and Array.reduce
        return this.savedData.reduce((accum, iter) => {
          if(iter.status != false) accum += 1
        }, 0);
    }
  }
})