jquery 关注最后加载的 vuejs 元素答案

【问题标题】：jquery focus on last loaded vuejs elementjquery 关注最后加载的 vuejs 元素
【发布时间】：2020-05-15 16:24:07
【问题描述】：

你好，我正在使用 vuejs 加载一些数据，这是代码

    add_line:function()
    {
        index = this.lines.length;
        this.lines.push({id:index});
        $('.search_and_select').last().focus();
    }

使用这段代码，它只关注最后一个元素，而不是当前加载的像这张图片第一张图片是当我按下添加行但没有焦点在具有类 search_and_select 的元素中这是第二张照片如您所见，它不关注当前添加的行，而是关注上一行这就是 search_and_select 组件

<search_and_select>
    <div slot='search_and_select' slot-scope="{change_keyword,results,no_result,chose_data,keyword,hidden_id,chose_first_value,default_value}">
        <div class="container">
            <input 
                name='chose_first_value[]'
                v-model="keyword"
                type="text" 
                {{$required ?? null}}
                class="{{$search_and_select}} o_input search_and_select"
                @keyup='change_keyword($event.target.value,"{{$type}}")'
            />
        </div>
    </div>
</search_and_select>

非常感谢

【问题讨论】：

标签： javascript jquery vue.js

【解决方案1】：

你可以在输入中动态添加一个ref prop，然后在需要时将其聚焦：

演示：

https://codepen.io/aQW5z9fe/pen/abvRzYO

<input 
  v-for="line in lines"
  :key="line.ref"
  :ref="line.ref"
  v-model="line.model"
  :placeholder="line.ref"
/>

data () {
  return {
    lines: [
      { 
        id: 0, 
        model: '',
        ref: 'input0' 
      }
    ]
  } 
},
methods: {
  addLine () {
    let index = this.lines.length
    // Add ref dynamically
    this.lines.push({ 
      id: index, 
      model: '',
      ref: `input${index}` 
    })
    // Focus added input
    this.$nextTick(() => {
      this.$refs[`input${index}`][0].focus()
    })
  }
}

【讨论】：