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

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>

Answer 2

经过几天的研究、全面测试和观察 DOM 行为，了解 vue.js 如何呈现组件，当然还基于此线程中其他人的建议。我意识到你不能真正关注 for 循环中元素的特定索引的 created/mounted 属性，特别是在这种情况下，如果正在获取数据，则为输入文本元素由于组件的异步行为，绑定组件来自服务器，您必须等到组件完全呈现。因此，我至少在我的案例中找到了一个解决方案，即在创建或安装的属性中使用动态观察器，并为数据属性的默认更改设置虚拟或重复数据属性，目的只是为了激活观察器以专注于组件渲染后的特定元素。这是它的样子。希望对遇到和我一样情况的朋友有所帮助。

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;
            },
}

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

How to focus on a specific input text after the component is rendered?

javascript

vue.js

vuejs2

vuejs3