vue 使用 span 来修改值 的小坑

前面有个需求，展现很多标签，展现的同时可以对标签进行修改。

使用vue,思路是 用 span 展现标签，点击 span 打开 contenteditable ，使其可编辑，编辑完成后，回车完成修改，提交。

最开始可以正常运行，但偶然发现，在修改第一个span时，回车后，不会变还是之前的值。网上找了下，大部分说改input来实现，没有用span这种的方案。

最后处理方式，对dom元素直接进行操作 el.innerHTML = "应该显示的值";  

附上代码：（部分是多余的）重点就一句， tg.innerHTML = tips[index].name; // 这句重点

<ul>
  <li v-for="(item, index) in tipCnts" :key="index">
    <span class="title" @click.prevent.stop="mod(item, $event)" @keydown.enter="change(item, index, $event)">{{item.name}}</span>
    <span class="badge">{{item.cnt}}</span>
  </li>
</ul>

vue 对应方法

methods: {
          mod: function (item, e) {
            var top = this;

            // 不允许修改直接返回
            if (!top.canmod) {
              return;
            }

            var tg = e.target;
            if (!tg.getAttribute('contenteditable')) {
              tg.setAttribute('contenteditable', true);
            }
            tg.focus();
          },
          change: function (item, idx, e) {
            var top = this;
            var tg = e.target;
            var nVal = tg.innerHTML;

            top.update(nVal, item.name, item, idx, tg);

            if (tg.getAttribute('contenteditable')) {
              tg.removeAttribute('contenteditable');
            }
          },
          update: function (val, oldVal, item, index, tg) {
            if (val === oldVal) return;
            var top = this, tips = top.tips;
            var cnt = item.cnt, len = top.tips.length, found = false;

            // 检查是否有符合条件的
            for (var i = 0; i < len; i++) {
              var tip = tips[i];
              if (tip.name === val) {
                tip.cnt += cnt;
                found = true;
                break;
              }
            }

            if (found) {
              tips.splice(index, 1);
              tg.innerHTML = tips[index].name; // 这句重点
            } else {
              item.name = val;
            }
       }
}

 

但是，针对这个需求，用 span 还是 input 对页面更好，请大佬留下宝贵意见。