Vue v-model bez input albo select

Question

Cześć czy ktoś z was próbował użyć v-model na elemencie innym niż input albo select?

Są poradniki jak to zrobić na własnym komponencie, ale te komponenty też zawierają w sobie input albo select.

Pytanie czy da się tej właściwości użyć dla innych elementów.

Mam na przykład aplikację w której wybory użytkownika są okreslane na divach która mają w sobie teksty i obrazki, a nie na formularzowych inputach i selectach. Czy da się tutaj użyć funkcjonalności v-model?

Answer 1

v-model to po prostu skrót na zbindowanie props value oraz eventu input więc możesz zrobić w parent:

<child-element v-bind:value="currentValue" v-on:input="(value) => currentValue = value" />

<child-element :value="currentValue" @input="(value) => currentValue = value" />

<child-element v-model="currentValue" />

oraz w child-element zrobić emit this.$emit("input", valueToPassThruVModel);

i wartość z valueToPassThruVModel będzie przekazana i zmieniona w parencie