时间戳

首页 > 解决方案 > 专注于 v-for 问题中的 textarea

javascript - 专注于 v-for 问题中的 textarea

问题描述

我有意见和回复。

当我单击评论上的回复按钮时，我希望它专注于折叠的文本区域。

自从它是评论部分以来，有很多文本区域..

  <div class="bg-white border shadow-soft p-4 mb-4" v-for="comment in comments" :key="comment.id"

回复按钮：

   <b-button class="text-action font-weight-light font-small" v-b-toggle="'collapse-'+comment.id" @click="focusTextArea('replay'+comment.id)">
                    <i class="fas fa-reply mr-2"></i> رد</b-button>

文本区域：

   <b-collapse :id="'collapse-'+comment.id">
     <textarea class="form-control " v-model="reply"  placeholder="Reply to John Doe" rows="6"  :ref="'replay'+comment.id"></textarea>
    <div class="d-flex justify-content-between mt-3"><small class="font-weight-light"><span >1000</span> characters remaining</small>
<button class="btn btn-primary btn-sm animate-up-2" type="button" @click="replyTo(comment)">send</button>
   </div>
    </b-collapse>

我试过这个：

   focusTextArea(textarea) {
                this.$nextTick(() => {
                    this.$refs[textarea][0].focus();
                });
            },

然后点击上面的按钮^。

当我单击按钮时没有任何反应，但是当我单击按钮返回时，textarea 被折叠，并且焦点在其折叠时出现：\

知道这里有什么问题吗？

标签： javascripthtmlcssvue.jsvuejs2

解决方案

我为此创建了一个codepen。

到目前为止，您的方法是正确的，但请记住，折叠元素有一个动画，您应该在触发focus().

https://codepen.io/elsib/pen/GROEVRe

推荐阅读