Inputs and Vue3. Troubles with v-model, event.target.value

Photoshop
,
1

Help me please! How to work with inputs in Vue3, with reactivity?
v-model - not work, event.target.value - undefined

I’m try to refactor my CEP panel with new technology, but I encounter UXP flaws again and again. How do you guys work with this? :slightly_smiling_face: Or am I missing something?

2

Wrap UXP/Spectrum elements in Vue components using modelValue.

// main.vue
<script setup>
import { ref } from "vue"
import Input from "Input.vue"

const string = ref("nice")
</script>

<template>
  <div>
    <p>string is: {{ string }}</p>
    <Input v-model="string" />
  </div>
</template>

// Input.vue
<script setup>
const props = defineProps({
  modelValue: String
})

const emit = defineEmits(["update:modelValue"])
</script>

<template>
  <sp-textfield :value="props.modelValue" @input="emit('update:modelValue', $event.target.value)"></sp-textfield>
</template>

I can’t speak for the new defineModel method in Vue 3.4 as I’ve not experimented with that yet.

If using Vue then I’d recommend using Bolt UXP as a foundation. I’ve found that when watching for changes, over time UDT takes progressively longer to reload Vue and it’s a real development bottleneck. Bolt solves this with some kind of websocket magic that I’m not going to pretend to understand :smiley:

2 Likes
3

Thanks for the answer! I’ll have to do this. We call this, if translated into English, “crutches”, the meaning is obvious. :grinning:

4

It’s a pretty standard Vue pattern, I use it all the time.