Simple code example

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
  <style>
  </style>
</head>
<body>
<div id="app">
    <h1>Bitcoin Price Index</h1>
    <div v-for="currency in info">
        {{ currency.description }}
        <span v-html="currency.symbol"></span>{{ currency.rate_float || currencyToDeciaml }}
    </div>
</div>
  <script>
      const app = new Vue({
          el   : '#app',
          data : {
              info : null,
          },
          filters : {
              currencyToDeciaml(val) {console.log(`foo`);
                  return Number(val).toFixed(2);
              }
          },
          // Dom is ready so now load the data
          mounted() {
            axios.get(`https://api.coindesk.com/v1/bpi/currentprice.json`)
                .then(response => this.info = response.data.bpi);
          },
      });
  </script>
</body>
</html>

I am trying to apply a simple filter currencyToDeciaml but it doesn't even get executed and foo does not display. I cannot seem to figure it out. Any help would be appreciated.

VueJs filters have no effect

1 Answers