Vue 3 UXP: Unable to Retrieve Input Content in <sp-textfield> Component Despite Multiple Binding Methods

Photoshop UXP Plugin API
1

I’m developing a UXP project using Vue 3. I’m facing an issue where I can’t obtain the input content in the sp - textfield component.

I’ve attempted different binding methods such as v-model and :value, but I’m still unable to get the value entered in the text field. Here are the code snippets I’ve used:

Binding with v-model

<template>
  <div class="search">
    <sp-textfield ref="textfield" v-model="modelValue"  id="inputField" class="searchTextField" type="text" size="s" placeholder=""/>
    <sp-button @click="searchBtn" variant="primary" size="s">Search</sp-button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const modelValue = ref(null);
const searchBtn = () => {
  console.log('modelValue', modelValue.value);
};
</script>

Binding with :value

<template>
  <div class="search">
    <sp-textfield ref="textfield" :value="modelValue"  id="inputField" class="searchTextField" type="text" size="s" placeholder=""/>
    <sp-button @click="searchBtn" variant="primary" size="s">Search</sp-button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const modelValue = ref(null);
const searchBtn = () => {
  console.log('modelValue', modelValue.value);
};
</script>

In both cases, when I click the “Search” button, the console always prints an empty value for modelValue.

I also tried using the official example code to get the input value:

document.querySelector(".yourTextField").addEventListener("input", evt => {
    console.log(`New value: ${evt.target.value}`);
})

But this also didn’t work.

2

I’ve no idea how Vue works, but how does const modelValue = ref(null) know that <sp-textfield ref="textfield" /> is the input to look for?

3

Hello, const modelValue = ref(null) was originally intended to implement the two-way binding functionality of v-model. However, in this case, it doesn’t work. Given this situation, I also attempted to use the value binding and ref binding methods to obtain the input content within the <sp-textfield /> component.

If we don’t consider using the Vue framework and just adopt a conventional approach, how exactly should we be able to retrieve the data within the <sp-textfield /> component?

4

Did you diectly use the example

document.querySelector(".yourTextField")

Or did you replace classname?

It’s very confusing to understand the question and very difficult to suggest any answers, when provided code parts don’t really match each other :confused:

5

To piggyback on what @Karmalakas was mentioning… In your vanilla javascript example you are listening for input on an element with the classname yourTextField but in your code your sp-textfield element has a classname of searchTextField. Maybe try…

document.querySelector(".searchTextField").addEventListener("input", evt => {
    console.log(`New value: ${evt.target.value}`);
})

or

const inputField = document.getElementById("inputField")
inputField.addEventListener("input", evt => {
    console.log(`New value: ${evt.target.value}`);
})

Please note, I am not in any way familiar with Vue but I know for certain that you can successfully listen to input on an sp-textfield in both vanilla javascript and Svelte.