Vue3中Spectrum UI的sp-textfield无法绑定v-model的解决方法？

Question

在vue3中使用了Spectrum UI，无法获取sp-textfield输入框输入的数据？

V-model方式无法获取：

<sp-textfield v-model="modelValue"  id="inputField" class="searchTextField" type="text" size="s"/>

绑定value的方式也不行：

<sp-textfield :value="modelValue" id="inputField" class="searchTextField" type="text" size="s"/>

官方提供了一个方法也获取不到

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

ref方式也尝试过了，不行。

这是官方文档：https://opensource.adobe.com/spectrum-web-components/componen...

根据提供的input事件，无法直接获取value.........

Answer 1

<template>
  <sp-textfield 
    ref="textField" 
    id="inputField" 
    class="searchTextField" 
    type="text" 
    size="s"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue';

const textField = ref(null);
const inputValue = ref('');

onMounted(() => {
  if (textField.value) {
    textField.value.addEventListener('input', (event) => {
      inputValue.value = event.target.value;
      console.log('输入值:', inputValue.value);
    });
  }
});
</script>

或者用ref:

<template>
  <sp-textfield 
    ref="textField" 
    id="inputField" 
    class="searchTextField" 
    type="text" 
    size="s"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue';

const textField = ref(null);
const inputValue = ref('');

onMounted(() => {
  if (textField.value) {
    textField.value.addEventListener('input', (event) => {
      inputValue.value = event.target.value;
      console.log('输入值:', inputValue.value);
    });
  }
});
</script>