Add v-model support

[srocerer]

I have few problems using this plugin:

1. Hard to recreate edit page for my form.
2. Can't delete item in array list.

[frikinside]

Could you please elaborate a bit about the first point? What do you try to accomplish? I had no problem deleting or adding items on the array list. What problem are you facing?

I tried to use v-model support but I encountered a few problems with that approach and decide to go with events instead. Would you like to use v-model support for the user input? for the user selection? or for the source list?

P.D. Sorry for the late response. I've been on vacation and a bit disconected for a few weeks.

[srocerer]

Problem is that I have used your component as a autocomplete for invoice items. When I want to edit invoice all items are empty.

[frikinside]

I'm sorry yo say that I would need further explanations of what problems are you facing. What items are empty when you edit the invoice? The selection? are you trying to use a complex object to fill in the selection? Maybe It would be easy if you could provide an example of your problem.

[GregorSondermeier]

Hi @srocevas, I have had a similar problem as you describe:

I am editing an item and use the same form component as when I create an item. That form contains the SimpleTypeahead component. Now, when editing an item, that form should be pre-populated with all current values. Usually v-model is your friend here, but SimpleTypeahead doesn't support it (yet?). However, I was able to use the defaultItem input property to pre-populate the SimpleTypeahead component with the current value from the item that I am editing.

Maybe that helps you, too.

[frikinside]

Thanks a lot for your input @GregorSondermeier !! One of the objective I want to acomplish with this component is a way to have "2" values in the same component: The input type by the user and the selected item. If you want to type a text that isn't on the suggested list, you can. And you can select an item of the list if you want. So you can have a string and an object or only a string as value for the component. And that's a bit of struggle with v-model. But I have a semiworking prototype with v-model in another branch. But i'm not sure if everyone would like to move to that system.

[rinaldihtb]

hi everyone ! any update regarding this ? how can I do it by using events ? to populate the input form while being edited or something.

[frikinside]

Nop, I did not advance in any of this yet. And I think is a problem that people keep facing. so maybe I would need to work on using v-model instead.

I need to study this, hopefully I have some time in the weekend.

[martinhschei]

Same issue for me. If the component would support using v-model if would be very useful.

[martinhschei]

I actually found a solution that works for my project.

I added a :ref for each of the three typeaheads i have on my page:

                        <TypeAhead
                            :id="`department_${index}`"
                            :class="typeAheadDepartment"
                            placeholder="Department name"
                            :items="departments"
                            :minInputLength="1"
                            :ref="`input_department_${index}`"
                            @selectItem="onSelectedDepartment"
                            @onInput="onDepartmentInput"
                            @onFocus="onFocusEventHandler(index)"
                        >

and in onSelectedDepartment (which is where i need to set the selectedItem of one of the other TypeAhead components) i do this:

            let ref = `input_department_${this.currentDepartmentIndex}`;
            this.$refs[ref][0].selectItem(email, false); // i added the second argument to skip firing event when i selectItem this way.

it actually works fine for me - maybe someone gets inspired to find another solution. :)

[raublekick]

I actually found a solution that works for my project.

I added a :ref for each of the three typeaheads i have on my page:

                        <TypeAhead
                            :id="`department_${index}`"
                            :class="typeAheadDepartment"
                            placeholder="Department name"
                            :items="departments"
                            :minInputLength="1"
                            :ref="`input_department_${index}`"
                            @selectItem="onSelectedDepartment"
                            @onInput="onDepartmentInput"
                            @onFocus="onFocusEventHandler(index)"
                        >

and in onSelectedDepartment (which is where i need to set the selectedItem of one of the other TypeAhead components) i do this:

            let ref = `input_department_${this.currentDepartmentIndex}`;
            this.$refs[ref][0].selectItem(email, false); // i added the second argument to skip firing event when i selectItem this way.

it actually works fine for me - maybe someone gets inspired to find another solution. :)

This works for me as well and is similar to a autocomplete component I was using in the past. Being able to use v-model or allowing the defaultItem property to be reactive to changes would be useful though.

[Danita]

Another simple way would be to create a wrapper component that implements the v-model interface:

<template>
	<simple-typeahead
		ref="inputRef"
		:items="items"
		@selectItem="handleSelectItem"
		@onInput="handleInput"
	/>
</template>

<script setup>
import SimpleTypeahead from 'vue3-simple-typeahead';
import { onMounted, ref, watch } from 'vue';

const inputRef = ref(null);

const emit = defineEmits([
	'update:modelValue'
]);
const props = defineProps({
	items: { type: Array, required: true },
	modelValue: { type: String },
})

function handleSelectItem(item) {
	emit('update:modelValue', item)
}

function handleInput(data) {
	let text = data.input;
	emit('update:modelValue', text)
}

onMounted(() => {
	inputRef.value.input = props.modelValue;
});

watch(() => props.modelValue, (newval, oldval) => {
	inputRef.value.input = newval;
})

</script>

Then you just do:

<typeahead-with-create
	autocomplete="off"
	class="form-control"
	:minInputLength="1"
	:items="['red', 'green', 'yellow']"
	v-model="formData.color"
/>