CODEWITHSUNDEEP
polymerweb-component
Vinay Raghu
Vinay Raghu

Reputation: 1279

Polymer attribute changed function

I have an element defined with currency and price attributes. When I set the currency attribute to British pound, I want to calculate price accordingly. I tried hooking the attrChanged method but the the if condition never logs true

currencyChanged: function (attrName, oldVal, newVal) {

    var actualPrice = this.getAttribute("usdprice");
    actualPrice = parseInt(actualPrice);

    var converter = 1;

    if(newVal === "£") {
      converter = 0.59;
      console.log("true");
    }

    this.$.price.innerHTML = actualPrice*converter;
  }

I change the currency using the below command 

var a = document.querySelector("gmselect-element"); 
a.setAttribute("currency", "£");

Upvotes: 1

Views: 2164

Answers (1)

CletusW
CletusW

Reputation: 3980

When you use published property *Changed watchers like currencyChanged the arguments are (oldVal, newVal). It's only when you create a generic attributeChanged lifecycle method that you get (attrName, oldVal, newVal). Try this:

currencyChanged: function (oldVal, newVal) {

    var actualPrice = this.getAttribute("usdprice");
    actualPrice = parseInt(actualPrice);

    var converter = 1;

    if(newVal === "£") {
      converter = 0.59;
      console.log("true");
    }

    this.$.price.innerHTML = actualPrice*converter;
  }

Open the Dev Tools console on this simplified jsbin to see it working.

Upvotes: 2

Related Questions