動的に作成された入力。 $ refsを使用することはできません。フォーカス？

Question

エディションの入力を動的に作成しました（要素を含むリスト、すべての要素は独自のIDを持ちます）。 特定の要素の編集が開始された場合にのみ、すべてがv-ifになります。 そのため、私は$refsを使用することができません。これは、Vueではrefで表示されないためです。

どうすれば解決できますか？ jQueryを追加したり、バニラJSを使う必要がなくなる度に、頻繁にそういうことが必要になるのは本当にありません。

Answer 1

通常、編集前にspanと入力してください。v-ifはではなく、がと結合されていますので、event.target.nextSibling.focus()のようになります。他のクリックイベント内でのみ関連だけで何かありながら、私は$refsを宣言として$refsにevent.target...を好む

は、コンポーネントの構造が複雑に。

Answer 2

あなたが本当にバニラJS（離れて集束するための）の使用を避けたかったなら、私はあなたがコンポーネントにリストの要素を移動する必要があることをお勧めしたい：

方法

Vue.component('list-items', { 
 
    template: 
 
    \t `<div> 
 
     \t <button @click="edit">edit</button> 
 
      <input v-if="editing" ref="input" type="text" :value="value" @input="$emit('input', $event.target.value)"> 
 
    \t </div>`, 
 
    props: ['value'], 
 
    data() { 
 
    \t return { 
 
     \t editing: false, 
 
     } 
 
    }, 
 
    methods: { 
 
    \t edit() { 
 
     \t this.editing = !this.editing 
 
      if (this.editing) { 
 
      \t this.$nextTick(() => { 
 
       \t this.$refs.input.focus() 
 
       }) 
 
      } 
 
     }, 
 
    }, 
 
}) 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
     list: [{ 
 
      title: 'foo', 
 
     }, { 
 
      title: 'bar', 
 
     }] 
 
    }, 
 
})

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

 
<div id="app"> 
 
    <list-items v-model="item.title" v-for="item in list"></list-items> 
 
    <pre>{{ list }}</pre> 
 
</div>