Vue 循环列表中的input/textarea 聚焦方法不起作用（显示的区域在v-show中）

博客写到了评论区的样式，想做类似掘金的评论区的功能，这是我写的样式，想实现功能点击文章下的评论然后光标聚焦在 textarea 中，可是试用了好多个方法都不起作用，包括自定义指令集v-foucs,绑定id去开始聚焦也不行，后来用一下方法，但是只能聚焦一次，当我第二次点击回复时候，就不起作用了

2. 解决方法用watch 监听一个全局变量进行聚焦，话不多说直接上代码

点击回复按钮调用的方法

    makeReplayComment (comment, index) {
      if (!comment.isShow) {
        // 添加字典 控制显示
        this.$set(comment, 'isShow', false)
        document.getElementById('comment' + index).style.color = "#027fff";
        // index 下标赋值给全局变量 获取 textarea 的id
        this.test = index
        console.log(this.test)
        this.isOpenFlagList[index].index = index
        this.isOpenFlagList[index].flag = true
        comment.isShow = !comment.isShow
      } else {
        this.isOpenFlagList[index].index = index
        this.isOpenFlagList[index].flag = false
        comment.isShow = !comment.isShow
        document.getElementById('comment' + index).style.color = "#8a93a0";
    },

监听数组，

  // 监听
  watch: {
    // 监听 回复框 打开状态 当状态改变时 执行以下操作 这里需要监听数组 数组里数值某个数值改变后 在去进行操作
    // 重要是拿到数组中的下标
    isOpenFlagList: {
      handler (val) {
        this.$nextTick(() => {
          document.getElementById('inputReplay' + this.test).focus()
          console
        })
      },
      deep: true
      // immediate: true,
    }
  }

数组定义，这里为了测试自己添加了两条数据，实际情况是通过结果拿到评论数据，然后通过评论的条数去创建新的数组，就是评论多少条，这个数组有多少条，

      testList: [
        {
          id: ''
        },
        {
          id: ''
        }
      ],

最终效果

总结：代码不够简洁，三级怕评论中也是同理，直接绑定通过接口拿到的数据就行，不要在创建新的数组操作，还有watch开启了deep:true 据说这样做不好，后边再次对本代码进行优化