v-focus 만들기 (v-if 후에 focus지정)

1. main.js

const focus = {
  mounted: (el) => el.focus(),
};

Vue.directive('focus', focus);

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

2. 컴포넌트 적용

 <ul>
   <li class="btnCol" v-if="!addCollectionFlag">
     <div class="addRow" @click="addCollectionClick">
       컬렉션 만들기
     </div>
   </li>
   <li class="addCol" v-else>
     <div class="collectionListTxt" style="margin-bottom: 8px">컬렉션 이름</div>
     <div>
       <!-- 포커스 지정될 인풋 v-focus 사용 -->
         <input v-model="collectionTitle"  v-focus />
     </div>
   </li>
</ul>

3. 컴포넌트 스크립트에 directives 지정

export default {
  name: 'BookMarkButton',
  directives: {
    focus: {
      inserted: function (el) {
        el.focus();
      },
    },
  },
  data() { }
}