vue.js [검색창 만들기]

 

이번에는 keyword를 입력하면 그에 해당하는 글을 자동으로 검색해주는 검색창을 만들어 보았다.

 

처음에는 backend에 수정하여 만들려고 했으나 vuetify를 사용하여 더 간편하고 깔끔하게 만들었다.

 

 

 

 

참고

https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/v-data-table/prop-search.vue

GitHub - vuetifyjs/vuetify: 🐉 Material Component Framework for Vue

 

 

 

 

 

 

 

Home.vue에서 빨간색 표시된 줄들만 추가해주면 된다!

 

Home.vue

 

 

 

 

 

Home.vue

 

 

 

 

 

 

 

 

 

"수정"이라는 keyword를 검색창에 입력하면 아래와 같이 그에 관련된 글들이 직관적으로 보여진다!