javascript - 如何使用 vuejs 定位表格单元格中的元素？

Question

我有一个表格，该表格在每个单元格的只读输入框中使用数据动态呈现。在第一个单元格中，有一个编辑按钮。当用户单击编辑时，应禁用输入框上的只读，以便可以在每个单元格中输入数据。编辑按钮应该隐藏，保存按钮应该显示。当用户点击保存时，它应该调用一个可以使用数据的方法(保存到数据库或其他东西)。

我想我可以使用该事件并深入到目标，但它是一个数组，我不确定该怎么做。有什么想法吗？

<div id="app">
<table border=1 width=100%>
  <tr>
    <td width=10px>EDIT</td>
    <td>Program</td>
    <td>Company</td>
    <td>Funding</td>
    <td>Funded</td>
    <td>Recruit</td>
  </tr>
  <tr v-for="program in programs">
    <td><button class="show" v-on:click="editItem($event)">edit</button>&nbsp;<button class="hide">save</button></td>    
    <td><input type="text" v-bind:data-id="program.id" readonly="readonly" v-model="program.program"></td>
    <td><input type="text" v-bind:data-id="program.id" readonly="readonly" v-model="program.company"></td>
    <td><input type="text" v-bind:data-id="program.id" readonly="readonly" v-model="program.funding"></td>
    <td><input type="text" v-bind:data-id="program.id" readonly="readonly" v-model="program.funded"></td>
    <td><input type="text" v-bind:data-id="program.id" readonly="readonly" v-model="program.Recruit"></td>
  </tr>
</table>
</div>

new Vue({
  el:"#app",
  data() {
    return {
      test:"hello",
      programs:"",
      hide:true
    }
  },
  created: function(){
    this.getPrograms();
  },
  mounted: function(){

  },
  methods: {
    getPrograms: function(){
     axios.get("https://my-json-server.typicode.com/isogunro/jsondb/Programs").then((response) => {
        this.programs = response.data;
      })
      .catch(function (error) {
        console.log(error);
      });
    },
    editItem: function(e){     
      console.log(e)
       //console.log(e.target.parentElement.parentNode.parentElement.HTMLCollection) doesn't work
      alert("Make line item editable for editing and then saving")
    }
  }
})

这是 pen供引用

Answer 1

我 forked 你的笔 here或者像这样尝试:

Vue.config.devtools = false
Vue.config.productionTip = false

new Vue({
  el:"#app",  
  filters: {
    toCapitalize (text) {
      return text.charAt(0).toUpperCase() + text.slice(1)
    }
  },  
  data () {
    return {
      columns: [
        'program', 'company', 'funding', 'funded', 'Recruit'
      ],
      programs: []
    }
  },
  created () {
    this.getPrograms()
  },
  methods: {
    getPrograms () {
      axios.get("https://my-json-server.typicode.com/isogunro/jsondb/Programs")
        .then(response =>
          // adding prop isEditable for each object    
          this.programs = response.data.map(program => ({ isEditable: false, ...program }))
        )
        .catch(error => console.log(error))
    },
    // using index of the current program to toggle the property isEditable
    editItem (index) {
      this.programs[index].isEditable = !this.programs[index].isEditable
    }
  }
})

.editable {
  border: 2px solid green
}
.button-action {
  min-width: 3rem
}
input {
  width: 100%;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>

<div id="app">
  <table border=1 width=100%>
    <tr>
      <td width=10px>EDIT</td>
      <td v-for="(column, indexColumn) in columns" :key="indexColumn">
        {{ column | toCapitalize }}
      </td>
    </tr>
    <tr v-for="(program, indexProgram) in programs" :key="indexProgram">
      <td>
        <button 
          @click="editItem(indexProgram)"
          class="button-action"
        >
          {{ program.isEditable ? 'save' : 'edit' }}
        </button>
      </td>    
      <td v-for="(column, indexColumn) in columns" :key="indexColumn">
        <input        
          v-model="program[column]"
          :readonly="!program.isEditable"
          :class="{ 'editable': program.isEditable }"
        >
      </td>
    </tr>
  </table>
</div>