The way to get sub-components through refs in vue is undefined.

there is a list:

<ordiary-group
   v-for="(commonAttr, index) in warePublishData.commonAttrs"
   :ref=""ref_ordiary_group_" + index"
   :key=""ordiary_group_" + commonAttr.propertyId"
   :property-id="commonAttr.propertyId"
   :attribute-type="commonAttr.inputType"
   :attribute="commonAttr"
   :checked-list="getCheckedList(commonAttr.propertyId)"
   @validate-ordinary="validateOrdinary">
</ordiary-group>

then I need to get the refs, of each list as follows:

    validate() {
            let _self = this
            let validate = () => {
                let passFlag = true
                for (let i = 0, len = this.warePublishData.commonAttrs.length; i < len; iPP) {
                    let result = _self.$refs["ref_ordiary_group_" + i]
                    _self.$nextTick(() => {
                        console.log(result)
                        console.log(result.validateXX)
                    })
                }
            }
            return validate()

        }

there is a validateXX method to print out the content of the component, but it is undefined, when you get it. What is the reason?

Vue.js undefined

Mar.06,2021

may be an array. Type it out first and have a look at

validateXX was introduced or defined after the call;
check for naming errors.

the console wants to output the return value of the method, and you should also call the method, shouldn't it?
console.log (result.validateXX ())

the custom components in the v-for loop put ref on him to take out an array, so there is no need to put dynamic values such as ref= "foo" and then this.$refs.foo gets the array of custom components and then according to the index subscript to get the component instance you want to operate. After obtaining the instance, you can call the strength method

_ self.$refs ['ref_ordiary_group_' + I] to get the returned value as an array. You need to get the subcomponent you want by subscript, and then click the method in the subcomponent (I have been solved)

Previous: How to properly block userAgent? like\ xA3\ xA9\ x09 by nginx

Next: How to use flask to publish webservice that can be called by other machines