Блог

Как я могу сосредоточиться на этом простом примере ввода? Должен ли я создать еще одну переменную const nameRef = ref(null) или есть более красивый способ решить эту проблему?

  <template>
    <input ref="name" :value="name" />
 </template>
    
 <script>
    import {ref, computed} from 'vue';
    export default {
      props: ['name'],
      setup(props) {
        const name = computed(() => someTextPrepare(props.name));
    
        // how can I do name.value.focus() for example?
    
        return { name }
      }
    }
</script>
 

Попробуйте обернуть name значение и ссылку в реактивное свойство :

  <template>
    <input :ref="theName.ref" :value="theName.value" />
 </template>
    
 <script>
    import {ref, computed,reactive} from 'vue';
    export default {
      props: ['name'],
      setup(props) {
        const theName=reactive({
                 value:computed(() => someTextPrepare(props.name)),
                 ref: ref(null)
         })
   
        return { theName }
      }
    }
</script>