I cann't bind the ref data to dom node. what should i do?

[ChainsDW]

<template>
  <div class="app-content">
    <div class="content-search">
      <el-input ref="inputCun.search" class="search-input" placeholder="请输入内容" @keypress.enter="inputCun.handleSearch"></el-input>
    </div>
    <div></div>
  </div>
</template>

<script lang="ts">
import Super from '@/public/mixin.ts'
import { ref, onMounted } from 'vue'
import { Options, setup } from 'vue-class-component'

const bindDom = () => {
  const search = ref(null)
  onMounted(() => {
    console.log(search.value)
    // watchEffect(()=>{
    //   console.log(stateDom.value)
    // })
  })
  const handleSearch = () => {
    console.log(search)
  }
  return { search, handleSearch }
}

@Options({
  components: {
  }
})
export default class Dashboard extends Super {
  inputCun = setup(() => bindDom())
}
</script>

<style scoped lang="stylus">
.app-content
  .content-search
    height 300px
    display flex
    justify-content center
    align-items center
    .search-input
      width 40vw
      min-width 130px
</style>

ref="inputCun.search" doesn't work

[ygj6]

The ref attribute means you can use 'this.$refs.xxx' to access the element. Maybe you need to provide a specific reproduction link.

[ktsn]

Looks like the string format ref does not handle such a nested path. You can write a function style ref to register the element.

<template>
  <el-input :ref="el => { inputCun.search = el }"></el-input>
</template>

https://v3.vuejs.org/guide/composition-api-template-refs.html#usage-inside-v-for