[Vuejs]-Why v-for won't render any DOMs? 'Property or method "data" is not defined on the instance but referenced during render.'

by

1👍

✅

You are confusing your data variable name, it should be info in your template, (not data) the actual data object is the container for all your vuejs app’s data.

Check the snippet, it works fine.

var app = new Vue({
  delimiters: ['[[', ']]'],
  el: '.EUR_Quotes',
  data: {
    info: []
  },
  created() {
    axios
      .get("http://data.fixer.io/api/latest?access_key=d&base=EUR")
      .then(response => {
        this.info = response.data.rates;
        console.log(response);
      });
  }
});
.EUR_Quotes {
  font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<html>
<head>
    
</head>
 <body>
    
    <div v-for="rates in info">
    <div class="EUR_Quotes">[[ info ]]
    </div>
    </div>
    
 </body>
  
<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  
</html>
👤Towkir

Leave a comment