How to bind array in DOM using Vue.js

Question

I am working on an application where I bind the list of data into DOM using Vue.js. But it is not working I have used v-for, v-list, and v-repeat but don't get it working. Here is my code both for the template and the script.

 <div class="weather-info" v-if="weather!=undefined">
    <div v-repeat="item in weather">
    
    <div class="location-box">
     <div class="location">{{item.day}}
     </div>
     <!-- <div class="date">{{ todaysDate() }}</div> -->
    </div>

    <div class="weather-box">
     <div class="temp">{{ Math.round(item.temprature) }}°c</div>
     <div class="weather">{{Math.round(item.windSpeed)}}</div>
     <div class="icon">
       <img src="{{iconUrl}}.png"/>
     </div>
    </div>
    </div>
   </div>

Here is the code of the Script

export default {
 data() {
  return {
   url_base: "https://localhost:7197/api/weather/",
   weather: undefined,
  };
 },
 methods :  {

    async fetchWeather(e) {
if (e.key == "Enter") {
let response = await axios.get(`${this.url_base}forecast?city=${this.query}`);
this.setResults(response.data);
}
},
setResults(res) {
 console.log(res)
 if(res.isSuccessful === true){
    this.weather = res.response;
 }else{
 // error message
 }
},
},
};

The JSON i received in res is show below.

Its not bind the array result into DOM means not showing anything — Kamran Khan
– Kamran Khan, Commented Nov 17, 2022 at 9:33
full code please, we need to see your vue state & whats inside weather variable — Roby Cigar
– Roby Cigar, Commented Nov 17, 2022 at 9:34
what is your weather default value is it undefined ? if it is [] then you should check the length of weather in v-for — Abbas Shaikh
– Abbas Shaikh, Commented Nov 17, 2022 at 9:38

Rohìt Jíndal · Accepted Answer · 2022-11-17 15:17:55Z

1

Your code should work fine, Just wondering from where you are invoking the fetchWeather method. I just created a working demo below. Please have a look and try to find the root cause of the issue.

Just for a demo purpose I am using mock data but you can replace that with an API call.

new Vue({
  el: '#app',
  data: {
    weather: undefined
  },
  mounted() {
    this.weather = [
      { day: 'Day 1' },
      { day: 'Day 2' },
      { day: 'Day 3' },
      { day: 'Day 4' }
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="weather-info" v-if="weather && weather.length">
    <div v-for="(item, index) in weather" :key="index">
      {{ item.day }}
    </div>
  </div>
</div>

answered Nov 17, 2022 at 15:17

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rehman Ahmed Khan · Accepted Answer · 2022-11-17 14:30:39Z

0

Please try to use v-for instead of v-repeat, you can replace it as follow:

<div v-for="(item, key) in weather" :key="key">
   {{ item }}
   ...
</div>

answered Nov 17, 2022 at 14:30

Rehman Ahmed Khan

466 bronze badges

Collectives™ on Stack Overflow

How to bind array in DOM using Vue.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related