时间戳

首页 > 解决方案 > 将计算属性作为道具传递（未定义）

javascript - 将计算属性作为道具传递（未定义）

问题描述

我有一个salePrice()计算属性，我正在尝试将它传递给子组件。问题是组件说这salePrice是未定义的。

我需要它是被动的，但它似乎不起作用。

<v-tab-item value="repairs_images" class="px-3 py-3" :eager="true">
    <h2>Repairs & Images</h2>
    <images_page v-if="realestate.id" :realestate="realestate"></images_page>
    <repairs_page v-if="realestate.id && salePrice !== undefined" :realestate="realestate" :salePrice="salePrice"/>
</v-tab-item>

这就是salePrice补偿。财产：

salePrice() {
    if (this.realestate.use_manual_price === true) {
        return this.realestate.manual_price
    }
    return this.realestate.price
},

这就是随时更改用户更改use_manual_price。在调试模式下，我看到它在应用程序中工作，但更改不会传播给孩子。

你知道如何让它工作吗？我也尝试this.$root.salePrice在子组件中使用。

标签： javascriptvue.jsvue-component

解决方案

看起来它应该可以工作，如果你提供一个复制链接会更好，比如 jsfiddle。

问题可能是由于this.realestateif 检查，您的计算属性实际上返回了一个未定义的值。您首先如何定义或获取此值？

无论如何，你可以试试：

  • 给出salePrice默认值的 prop 定义，例如

     props:{
  salesPrice: {type: Number, default: 0}
  }

  • 或者还向您的计算属性添加另一个 if-check，它返回一个默认值，以防万一this.realestate.price在那个实例时刻也未定义。

    salePrice() {
    if (this.realestate.use_manual_price === true) {
        return this.realestate.manual_price
    } 
    else if(this.realestate.price){
    return this.realestate.price
    }
     return 'dummy price'
    },

据我所知，如果来自父组件的数据不可用，道具当然可以首先呈现为“未定义”。如果您正在处理计算属性，它可能会在计算属性返回值之前抛出您提到的错误。

请告诉我！

推荐阅读