Vue 3 - 带有计算的模板引用？答案

【问题标题】：Vue 3 - template ref with computed?Vue 3 - 带有计算的模板引用？
【发布时间】：2021-10-07 14:47:03
【问题描述】：

我该如何专注于这个简单的输入示例？我应该再创建一个变量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>

【问题讨论】：

试过this.$refs.name.focus()?
不，我使用composition api
您所需要的都在文档中：v3.vuejs.org/guide/…

标签： vue.js vuejs3 vue-composition-api

【解决方案1】：

尝试将 name 值和 ref 包装在反应属性中：

 <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>

【讨论】：