Получение предупреждения Vue TypeError: Невозможно прочитать свойство undefined, но данные присутствуют

Question

Я получаю следующие ошибки:

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

и

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

• Я использую один и тот же код в очень похожих компонентах и ​​не получаю эти ошибки
• Все элементы в Created () выдают это предупреждение, т.е. если я удаляю this.itemName, тогда this.ownership вызовет предупреждение и т. Д.
• Несмотря на наличие этих ошибок, данные доступны в инструментах Vue dev и отображаются в браузере, как и ожидалось
• Ошибки присутствуют только при редактировании динамически созданного элемента. Например, элементы, извлеченные через API, не вызывают это предупреждение при редактировании

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

Возможно, проблема в вычисленном свойстве для itemName. Если this.myAssets пусто или не содержит правильный элемент, find() в getAssetId возвращает неопределенное значение (https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/find). getAssetId используется в вычисляемом свойстве для itemName, где вы пытаетесь получить доступ к itemName из неопределенного.