How to connect and use a component for vue?

D

DemonFromIrk2019-03-03 17:16:36

Vue.js

DemonFromIrk, 2019-03-03 17:16:36

I'm trying to connect to the project https://github.com/paliari/v-autocomplete
I don't understand how to install and use it, please help!
Installed via npm... what's next? (Don't swear too much, just started to master 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>

In autoComplete.vue put:

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>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

V

Vitaly Stolyarov, 2019-03-03
@Ni55aN

Everything is in Usage https://github.com/paliari/v-autocomplete#usage