Javascript 如何使用vuejs将表单元格中的元素作为目标？

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

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

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

编辑
程序
公司
基金
提供资金
招募
编辑保存
新Vue({
el:“应用程序”，
数据（）{
返回{
测试：“你好”，
节目：“，
隐藏：真的
}
},
已创建：函数（）{
这个.getPrograms（）；
},
挂载：函数（）{
},
方法：{
getPrograms:function（）{
axios.get（“https://my-json-server.typicode.com/isogunro/jsondb/Programs）然后（（回应）=>{
this.programs=response.data；
})
.catch（函数（错误）{
console.log（错误）；
});
},
编辑项：函数（e）{
控制台日志（e）
//日志（e.target.parentElement.parentNode.parentElement.HTMLCollection）不工作
警报（“使行项目可编辑以进行编辑，然后保存”）
}
}
})

---

下面是供参考的方法，为数组中的元素添加只读属性。

---

单击编辑按钮后，将数组中元素的只读属性设置为false。

向数组中的元素添加只读属性。

---

单击编辑按钮后，将数组中元素的readonly属性设置为false。

检索程序列表时，添加一个额外属性，该属性将指示行是否处于编辑模式：

axios.get(url).then (response => {
    this.programs = response.data.map(item => {
        ...item,
        isEditing: false
    })
}) 

此外，程序应初始化为空数组，而不是空字符串

在editItem方法中，您将传递对item的引用，而不是事件对象，然后将IsEdit设置为true

editItem(item) {
    item.isEditing = true
}

然后，您可以创建一个方法，该方法将在行输入处于只读模式时检索：

isReadOnly(item) {
    return item.isEditing ? false : "readonly";
}

然后将此方法绑定到readonly属性

<input type="text" :readonly="isReadOnly(item)" />

---

避免使用节点引用，并尝试解决绑定问题。例如，您可以将按钮标题绑定到方法，并根据编辑状态返回“保存”或“编辑”值。

当您检索程序列表时，添加一个额外的属性，该属性将指示行是否处于编辑模式：

axios.get(url).then (response => {
    this.programs = response.data.map(item => {
        ...item,
        isEditing: false
    })
}) 

此外，程序应初始化为空数组，而不是空字符串

在editItem方法中，您将传递对item的引用，而不是事件对象，然后将IsEdit设置为true

editItem(item) {
    item.isEditing = true
}

然后，您可以创建一个方法，该方法将在行输入处于只读模式时检索：

isReadOnly(item) {
    return item.isEditing ? false : "readonly";
}

然后将此方法绑定到readonly属性

<input type="text" :readonly="isReadOnly(item)" />

---

避免使用节点引用，并尝试解决绑定问题。例如，您可以将按钮标题绑定到方法，并根据i编辑状态返回“保存”或“编辑”值。

i

forked

您的笔，或者像这样尝试：

Vue.config.devtools=false
Vue.config.productionTip=false
新Vue({
el:“应用程序”，
过滤器：{
资本化（文本）{
返回text.charAt（0.toUpperCase（）+text.slice（1）
}
},  
数据（）{
返回{
栏目：[
‘计划’、‘公司’、‘资金’、‘资助’、‘招募’
],
节目：[]
}
},
创建（）{
这是getPrograms（）
},
方法：{
getPrograms（）{
axios.get（“https://my-json-server.typicode.com/isogunro/jsondb/Programs")
。然后（响应=>
//为每个对象添加可编辑的属性
this.programs=response.data.map（program=>（{isEditable:false，…program}））
)
.catch（错误=>console.log（错误））
},
//使用当前程序的索引切换属性isEditable
编辑项目（索引）{
this.programs[index].isEditable=！this.programs[index].isEditable
}
}
})

。可编辑{
边框：2件纯绿
}
.按钮动作{
最小宽度：3rem
}
输入{
宽度：100%；
}

编辑
{{column | toCapitalize}}
{{program.isEditable？'save'：'edit'}

i

用叉子叉起你的笔，或者像这样试着：


Vue.config.devtools=false
Vue.config.productionTip=false
新Vue({
el:“应用程序”，
过滤器：{
资本化（文本）{
返回text.charAt（0.toUpperCase（）+text.slice（1）
}
},  
数据（）{
返回{
栏目：[
‘计划’、‘公司’、‘资金’、‘资助’、‘招募’
],
节目：[]
}
},
创建（）{
这是getPrograms（）
},
方法：{
getPrograms（）{
axios.get（“https://my-json-server.typicode.com/isogunro/jsondb/Programs")
。然后（响应=>
//为每个对象添加可编辑的属性
this.programs=response.data.map（program=>（{isEditable:false，…program}））
)
.catch（错误=>console.log（错误））
},
//使用当前程序的索引切换属性isEditable
编辑项目（索引）{
this.programs[index].isEditable=！this.programs[index].isEditable
}
}
})
。可编辑{
边框：2件纯绿
}
.按钮动作{
最小宽度：3rem
}
输入{
宽度：100%；
}

编辑
{{column | toCapitalize}}
{{program.isEditable？'save'：'edit'}
有一个属性来跟踪正在编辑的程序行。

您可以通过使用已经可用的program.id属性来实现这一点

editingId
vm属性指示正在编辑的“程序”。如果