javascript - vue怎么实现这种效果？

Question

点击编辑按钮时前面的类容可以修改
是拿table布局的

点击编辑按钮时我怎么给前面的td添加contenteditable属性？这个逻辑要怎么写？

 <tr v-for ="item in infos" track-by="$index">
            <td>
              <p>{{item.years}}</p>
              <p>{{item.times}}</p>
            </td>
            <td>
              <span>{{item.name}}</span>
              <input  v-model="item.name"  type="text" :class="{'show' :$index===isAddEidt}">
            </td>
            <td >
              <span>{{item.ID}}</span>
              <input  v-model="item.ID"  type="text" :class="{'show' :$index===isAddEidt}">
            </td>
            <td >
              <span> {{item.machine}}</span>
              <input  v-model="item.machine"  type="text" :class="{'show' :$index===isAddEidt}">
            </td>
            <td>
              <span> {{item.dealing}}</span>
              <input  v-model="item.dealing"  type="text" :class="{'show' :$index===isAddEidt}">
            </td>
            <td>
              <p  class="btn-add-remove">
                <span class="icon-shuanchu" @click="removeAd($index)"></span>
                <span class="icon-xiugai" @click="addEdit($index)"></span>
              </p>
              <button class="region btn-style">保存</button>
            </td>
          </tr>

data:{isAddEidt:true}
  methods: {
    addEdit:function (index) {
      this.isAddEidt=index;
    }
}
 

当点击编辑按钮时怎么隐藏当前的p 然后显示button 我现在这样写有问题每次新增的数据 点击第一个然后后面的所有button都出来了 怎么控制只显示当前的button 和隐藏当前的p？

Answer 1

这是我现在的实现方法

html部分

 <tr v-for ="item in infos" track-by="$index">
            <td>
              <p>{{item.years}}</p>
              <p>{{item.times}}</p>
            </td>
            <td>
              <span>{{item.name}}</span>
              <input  v-model="item.name"  type="text" :class="{'show' :$index===isAddEidt}">
            </td>
            <td >
              <span>{{item.ID}}</span>
              <input  v-model="item.ID"  type="text" :class="{'show' :$index===isAddEidt}">
            </td>
            <td >
              <span> {{item.machine}}</span>
              <input  v-model="item.machine"  type="text" :class="{'show' :$index===isAddEidt}">
            </td>
            <td>
              <span> {{item.dealing}}</span>
              <input  v-model="item.dealing"  type="text" :class="{'show' :$index===isAddEidt}">
            </td>
            <td>
              <p v-if="!item.isEdit" class="btn-add-remove">
                <span class="icon-shuanchu" @click="removeAd($index)"></span>
                <span class="icon-xiugai" @click="addEdit($index)"></span>
              </p>
              <button v-else  class="region btn-style" >保存</button>
            </td>
          </tr>

js部分

data{isAddEidt:true},
methods:function(){
    addEdit:function (index) {
      this.isAddEidt=index;
      this.infos[index].isEdit = true;
    }
}

不足的地方还请各位大神指教下

Answer 2

点击之后换成input标签，自己写个自定义指令

Answer 3

<td contenteditable={isContentEditable}>

data: {
    isContentEditable: false
}

onClick() {
    this.data.isContentEditable = true
}

Answer 4

DOM

let tds = ducoment.querySelectorAll('td'),
    edit =document.getElementById('edit)
edit.addEventListener('clcik',function(){
    for(let i=0;i<tds.length;i++){
    tds[i].setAttribute('contenteditable','true')
    }
})      

使用Vuejs的话数据应该在data里面啊

<ul id="table">
    <li v-for="item of items">{{item}}</li>
    <button @click="edit"></button>
</ul>

new Vue({
    el:'#table',
    data:{
        items:[111,222,333,444]
    },
    methods:{
        edit(){
            ...
        }
    }
})

个人理解