javascript - 组件渲染后如何聚焦到特定的输入文本？

Question

每次我通过使用类似这样的路由器对象推送组件来渲染组件时，我都在努力使其正常工作 this.$router.push('/Home/mypath');即使我传递了另一个索引值，它也将仅关注组件呈现后索引 = 0 的第一个输入文本元素。基本上，我将索引值传递给输入文本元素的 ref，该元素位于组件的 v-for 循环内，因此在 mounted()，我有这样的东西

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

但即使我传递了值 1 或 2，它仍然专注于第一个输入元素。当我查看控制台日志时，它在控制台上显示此错误。类型错误:无法读取未定义的属性“0”指向这一行 this.$refs.newInp[index].focus();

获取 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

根据我的理解，您希望在获取一些数据后将焦点集中在 textarea 上，这意味着尝试在 mounted 方法中集中焦点是行不通的，因为您无法分辨如果数据已获取并且 textarea 已存在于 DOM 中。

因此，最好的方法是在确保已获取数据后，在 then 回调中集中注意力。

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>