如何在呈现组件后聚焦于特定的输入文本？

Question

每次渲染组件时，我都在努力使其正常工作，方法是使用router对象推送组件，例如this$路由器。推送（'/Home/mypath'） ，即使我为index传递了另一个值，它也只会在呈现组件后关注index=0的第一个输入文本元素。基本上，我将一个索引值传递给输入文本元素的ref，该元素位于组件的v-for循环中，因此在mounted（），我有如下内容

mounted() {
  this.$nextTick(() => 
  {                
      this.$refs.newInp[index].focus();          
    });
  }

但是它仍然关注第一个输入元素，即使我传递了1或2的值。当我查看控制台日志时，它在控制台上显示了这个错误。类型错误：无法读取属性'0'的未定义指向这一行this.$refs.newInp[index]. point（）；

获取v-for中数据的示例代码

async GetContentDetails() {
     let testRes =
         await axios.get('myUrl/api', {
              params: {
                   ContentId: this.$cookie.get('OpV-ContId')
                      }
                 }).then(res => this.contentItems = res.data)
                      .then()
                      .catch(error => console.log(error));
                this.testData = testRes;
}

模板：

<div v-for="(contItem, index) in contentItems" :key="contItem.commentId">
  <textarea class="reply-commented" ref="newInp"></textarea>
  </div>

如何解决这类问题？解决这个问题的办法是什么？谢谢




Answer 1

对DOM行为进行了几天的研究和彻底的测试，并观察了如何使用vue。js呈现组件，当然是基于其他人对此线程的建议。我意识到，如果要在组件上进行绑定的数据由于其异步行为而来自服务器，并且您必须等待组件完全呈现，那么您就不能真正将焦点放在for循环中某个元素的特定索引上，尤其是在本例中，输入文本元素。因此，我找到了一个解决方案，至少在我的案例中，在创建的或装入的属性中使用动态观察者，并为数据属性的默认更改设置虚拟或重复数据属性，以便在呈现组件后仅激活观察者以关注特定元素。这就是它的样子。希望这对遇到和我一样情况的人有所帮助。

created() {           
            this.GetContentDetails();
            this.$watch('commentItems2', function () {
                this.$nextTick(() => {
                    this.$refs.newRep[mapCredential.state.index2].focus();
                });
            });
        },

methods: {
 async GetComment2() {
                let testRes =
                    await axios.get('myUrl/api/GetContent/GetComments')
                        .then(this.GetReply2())
                        .catch(error => console.log(error));
                this.commentItems = testRes.data;
                this.commentItems2 = testRes.data;
            },
}

Answer 2

据我所知，在获取一些数据后，您希望聚焦textarea，也就是说，在mounted方法中尝试聚焦是行不通的，因为您无法判断数据是否已被获取，并且textarea已经存在于DOM中。

因此，最好的方法是在确保数据已被提取后，在然后回调中聚焦。

new Vue({
  el: '#app',
  
  data: {
    posts: [],
    index: 3 // Change this to focus whatever textarea you want
  },
  
  mounted () {
    this.fetchItems();
  },
  
  methods: {
    fetchItems () {
      const url = 'https://jsonplaceholder.typicode.com/posts'

      axios.get(url).then(response => {
        this.posts = response.data
        
        this.$nextTick(_ => {
          this.$refs.newInp[this.index].focus()
        })
      })
    }
  }
});

<div id="app"> 
  <div v-for="(post, index) in posts" :key="post.id">
    <textarea class="reply-commented" ref="newInp" v-text="post.body"></textarea>
  </div> 
</div>



<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>