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!