Computed property Polymer

0

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 this detail page, I have an element where I put information about the product on that sales platform. This element asks for 5 basic properties (logo, name, description, url and price). I can show the data without problems when I make the basic firebase path {{item.platform.platform.value}}, however 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'm using the same tactic for product listing and it 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 I use the example above, the value is displayed normally. But when I use the code below it returns 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'
}

I thank you in advance, and if you are missing information or are not clear what I want, I apologize, I am not very experienced and do not know many specific terms.

    
asked by anonymous 27.06.2018 / 14:45

1 answer

0

I was able 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>
    
28.06.2018 / 15:56