Computed property Polymer

Question

Greetings. My problem is this. I have a product detail page. It is accessed after clicking on a specific product on another listing page, the content is displayed through the product ID. So far so good. Inside that detail page, I have an element where I put product information on that sales platform. This element asks for 5 basic properties (logo, name, description, url and price). I can show the data smoothly when I do the basic firebase path {{item.platform.platform.value}} but I want to manipulate the value that is coming and format it, but when I do the computed property it does not return value. I am using the same tactic for the listing of products and has worked there.

<template is="dom-if" if={{item.platform.teste.url}}>
   <box-plataforma logo="*imagem*" nome="{{nome}}" descricao="{{descricao}}" url="{{item.platform.teste.url}}" preco="{{item.platform.teste.value}}"></box-plataforma>
</template>

When using the above example the value is displayed normally. However when using the code below is returned empty value for the price which is what I want to format.

<template is="dom-if" if={{item.platform.teste.url}}>
   <box-plataforma logo="*imagem*" nome="{{nome}}" descricao="{{descricao}}" url="{{item.platform.teste.url}}" preco="{{valueTeste}}"></box-plataforma>
</template>

The value I leave in properties is as follows:

valueTeste: {
  type: String,
  computed: 'pricePlatform(item.platform.teste.value)'
}

And the function to transform the value is:

pricePlatform(value) {
 if (value == undefined) {
  value = 0;
 }
 return (value != 0) ? '$ ' + value.toFixed(2).replace('.', ',') : 'Grátis'
}

Thanks in advance, and if information is lacking or it is not clear what I wish to apologize, I am not very experienced and I do not know many specific terms.

Answer 1

I managed to solve, instead of creating computed properties I made a function

_pricePlatform(preco) {
    if (preco == undefined) {
      preco = 0;
    }
    return (preco != 0) ? 'R$ ' + preco.toFixed(2).replace('.', ',') : 'Grátis'
  }

and in the element I used something that the Polymer documentation calls "Computed Binding" here

<box-plataforma logo="*imagem*" nome="Teste" descricao="Teste" url="{{item.platform.teste.url}}" preco="{{_pricePlatform(item.platform.teste.value)}}"></box-plataforma>