0.1.13 • Published 1 year ago
nuxt3-autocomplete v0.1.13
This is an autocomplete for nuxt3 based on autocompleter
How to use
Install
// npm install
npm install nuxt3-autocomplete --save
Use as component
- make a plugin
// plugins/autocomplete.client.ts
import Autocomplete from 'nuxt3-autocomplete';
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component("Autocomplete", Autocomplete, {});
});
- now it's available on your template. here is a working example
// use it
<template>
<div class="row">
<div class="col-md-3 bg-danger">
</div>
<div class="col-md-3 bg-warning">
<Autocomplete :lov="countries" class="form-control" v-model="selected" @select="onSelectAutofill" @change="onSelectAutofill"/>
</div>
<div class="col-md-3 bg-info">
selected: {{selected}}
</div>
<div class="col-md-3 bg-success">
{{countries}}
<button class="btn btn-primary" @click="tambah">Tambah</button>
</div>
</div>
</template>
<script setup lang="ts">
const defaultCountries = [
{ label: 'United Kingdom', value: 'UK' },
{ label: 'United States', value: 'US' }
];
const countries = ref(defaultCountries);
const tambah = () =>{
countries.value = [
{ label: 'United Kingdom', value: 'UK' },
{ label: 'United States', value: 'US' },
{ label: 'Indonesia', value: 'ID' },
]
console.log("countries: ", countries);
}
const onSelectAutofill = () => {
console.log("selected: ", selected);
}
const onChangeAutofill = () => {
console.log("selected: ", selected);
}
const selected = ref();
</script>