Пытаюсь подключить к проекту
https://github.com/paliari/v-autocomplete
Никак не пойму, как установить и использовать, помогите, пожалуйста!
Установил через npm... а что дальше? (Не ругайтесь сильно, только начал осваивать vue)
spoiler<!DOCTYPE html>
<html>
<head>
<title>Welcome to Vue</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/jquery"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Include after Vue -->
<link rel="stylesheet" href="/node_modules/v-autocomplete/dist/v-autocomplete.css"> </link>
<script src="/node_modules/v-autocomplete/dist/v-autocomplete.js"></script>
<script>
Vue.use(VAutocomplete.default)
</script>
</head>
<body>
<div class="box box-primary">
</div>
<template>
<v-autocomplete :items="items" v-model="item" :get-label="getLabel" :component-item='template' @update-items="updateItems">
</v-autocomplete>
</template>
<script>
import ItemTemplate from 'autoComplete.vue'
export default {
data () {
return {
item: {id: 9, name: 'Lion', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'},
items: [],
template: ItemTemplate
}
},
methods: {
getLabel (item) {
return item.name
},
updateItems (text) {
yourGetItemsMethod(text).then( (response) => {
this.items = response
})
}
}
}
</script>
</body>
</html>
В autoComplete.vue положил:
spoiler<template>
<div>
<b>#{{item.id}}</b>
<span>{{ item.name }}</span>
<abbr>{{item.description}}</abbr>
</div>
</template>
<script>
export default {
props: {
item: { required: true },
searchText: { required: true }
}
}
</script>
Средний
