$refs undefined, while using v-runtime-template

[tirumalavasu]

<v-runtime-template :template='template'/>

data () {
    return {
      template: `
        <el-form :model='credentialsForm' :rules='credentialsRules' ref='credentialsForm' label-width='0' class='credentialsForm'> <el-form-item prop='name'> <el-input v-model='credentialsForm.name' type='text' placeholder='name'></el-input> </el-form-item> <el-form-item prop='type'> <el-select v-model='credentialsForm.type' placeholder='Select Type' class='full-width'> <el-option label='JDBC' value='jdbc'></el-option> <el-option label='LDAP' value='ldap'></el-option> <el-option label='Kerberos' value='kerberos'></el-option> </el-select> </el-form-item> <el-form-item prop='username'> <el-input v-model='credentialsForm.username' type='text' placeholder='username'></el-input> </el-form-item> <el-form-item prop='password'> <el-input v-model='credentialsForm.password' type='password' placeholder='password'></el-input> </el-form-item> <el-form-item class='float-right full-width'> <el-button type='primary' @click="addCredentials('credentialsForm')" class='float-right'>Create</el-button> <el-button @click="resetForm('credentialsForm')" class='float-right mr24'>Reset</el-button> </el-form-item> </el-form>
      `,
  }
}

addCredentials (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
 }

Error: 'Cannot read property 'validate' of undefined'

Any help?

[alexjoverm]

Unfortunately, it's not working with refs. Not sure honestly if it makes sense for them

[ridea-co]

Would it be possible for you to add:

ref: 'intermediate' <-- any naming you'd like inside the return parameter:

Eg:

 return h(dynamic, { 
        props: finalProps,
        ref: 'intermediate'
});

That way, the refs inside the v-template can be referenced.

Eg: <v-runtime-template :template="xxxx" ref="runtimetemplate"></v-runtime-template>

And whatever is inside the v-template can be referenced by: this.$refs.runtimetemplate.$refs.intermediate.$refs

[ariona]

@ridea-co have you tried it? i am bumping to this issue currenty, can't get the refs from runtime-template

[ridea-co]

Yup. I added it and it is working at the moment. Just that it needs to be referenced all the way from the node

[tirumalavasu]

Vue.compile(templateString) - solved my issue.

Example:

const compiledTemplate = Vue.compile(templateString)
render(h) {
  return compiledTemplate.render.call(this, h)
}

@ridea-co , thanks for your suggestion