Getting a Vue warning TypeError: Cannot read property of undefined but the data is present

Question

I am getting the following errors:

[Vue warn]: Error in nextTick: "TypeError: Cannot read property 'itemName' of undefined"

found in

---> <AssetEditForm> at src\components\AssetEditForm.vue
       <AppSection> at src\components\AppSection.vue
         <MyAssets> at src\views\Assets.vue
           <App> at src\App.vue
             <Root>

and

vue.runtime.esm.js?2b0e:1737 TypeError: Cannot read property 'itemName' of undefined
at VueComponent.itemName (AssetEditForm.vue?6bb7:218)
at Watcher.get (vue.runtime.esm.js?2b0e:3138)
at Watcher.evaluate (vue.runtime.esm.js?2b0e:3245)
at VueComponent.computedGetter [as itemName] (vue.runtime.esm.js?2b0e:3503)
at VueComponent.eval (AssetEditForm.vue?6bb7:104)
at Array.eval (vue.runtime.esm.js?2b0e:1833)
at flushCallbacks (vue.runtime.esm.js?2b0e:1754)

NB

• I am using the same code in very similar components and not getting these errors
• All items in Created() throw this warning, ie if I remove this.itemName then this.ownership will trigger the warning, and so on
• Even though these errors are present, the data is available in Vue dev tools and displays as expected in the browser
• The errors are only present when I edit a dynamically created item. For instance items pulled in via an API do not trigger this warning when editing them

AssetEditForm

props: {
    myAssets:{},
    assetId:{
        type: String
    },
},data: function () {
    return {
        isShown: this.showForm,
        myAssetId: this.assetId,
        assetName: '',
        assetOwnership: '',
        assetOwnershipPercentage: '',
        assetEstimatedValue: '',
        typePlural: this.type + '\'s',
        typeLowerCase: this.type.toLowerCase(),
        // assetIdIs: '',
    }
},
created: function () {
    this.$nextTick(function () {
        console.log('created');
        this.assetName = this.itemName;
        this.assetOwnership = this.ownership;
        this.assetOwnershipPercentage = this.ownershipPercentage;
        this.assetEstimatedValue = this.estimatedValue;
    })
},
computed: {
    getAssetId: function() {
        const myInfo = this.myAssets;
        return myInfo.find(x => x.id == this.assetId);
    },
    itemName: function() {
        return this.getAssetId.itemName
    },
    ownership: function() {
        return this.getAssetId.ownership
                },
    ownershipPercentage: function() {
        return this.getAssetId.ownershipPercentage
    },
    estimatedValue: function() {
        return this.getAssetId.estimatedValue
    },
},

Answer 1

The problem might be the computed property for itemName . If this.myAssets is empty or does not contain the correct item find() in getAssetId returns undefined ( https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/find ). getAssetId is used in the computed property for itemName where you are trying access itemName of undefined.