Issue with databinding to Umbraco backoffice custom property editor built using vite + vuejs

Questions
1

Hi,

I’m trying to build a custom property editor using vite + vuejs. I’m creating a dropdown and populating the options for the backoffice users to choose from. Everything is working fine, except the model binding of the control - after I select a value and do a ‘save and publish’ of my document template on which it’s used, I’m expecting the saved value to be passed as a property to the property editor vue component by umbraco when it loads it the next time which is not working.

Umbraco Version: 15

Here’s my Vue code:

<template>
    <div>
        <input type="text" v-model="value" list="entitylist" class="umb-property-editor umb-textstring textstring"></input>
        <datalist id="entitylist" ref="entitylist">
            <option v-for="entity in list" :key="entity" :value="entity"></option>
        </datalist>
    </div>
</template>

<script>
    export default {
        name: "Entity",
        props: {
			modelValue: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				value: '',
				list: ['test1', 'test2']
			}
		},
        watch: {
			value(newValue) {
				this.$emit('update:modelValue', newValue);
			}
		},
        async created() {
			//Print the properties received
            console.log("Props:", this.$props);

            await this.getEntityList();
        }
    };
</script>

What am I doing wrong here? Or am I wrong in expecting the value to be sent to the component as a property by Umbraco? Or should I be importing any Umbraco library here?

Any help on this is greatly appreciated. Thanks!

2

You need to dispatch an event. See my example here: