How to bind retrieved data from v-for to data object in Vuejs?

Question

I need to bind data retrieved with v-for (passed via props from parent) to data object. I tried with v-modal but i could not make it work. I am using OpenWeatherApi and I need to store only today's date so I can change it to another format.

So how can i store {{ data.dt }} in "time" in my data object?

<template>
  <div>
      <h2 v-for="(date, index) in filteredList" :key="index" :bind:date="myDate">
          {{date.dt}}
      </h2>
      
  </div>
</template>

<script>
    export default {
        name: 'TodayDate',
        props: [
            "weather"
        ],
        data() {
            return {
                myDate: '',
                time: '',
                today: '',
                isToday: '',
                weekDay: '',
                date: '',
                month: ''
            }
        },
        created() {
            this.getCurrentDate()
        },
        methods: {
            getCurrentDate() {
                this.myDate = new Date(this.time * 1000)
                this.today = new Date(),
                this.isToday = (this.today.toDateString() == this.myDate.toDateString()) ? 'today' : '';
                this.weekDay = this.myDate.toLocaleString('default', { weekday: 'short' })
                this.date = this.myDate.toLocaleString('default', { day: 'numeric' })
                this.month = this.myDate.toLocaleString('default', { month: 'short' })
            }
        },
        computed: {
            filteredList() {
                return this.weather.slice(0, 1);
            },
        }
    }
</script>

Thank you.

user14967413 · Accepted Answer · 2021-09-04 13:21:41Z

1

Do not assign any property values inside template's v-for loop. Instead create another computed property which will compute the value you need.

computed: {
  todayDate() {
    if (this.filteredList && this.filteredList.length) {
      return this.fileredList[0].dt
    }
  }
}

If you need this value to be directly in the component's data object, subsequently create a watcher.

watch: {
  todayDate(todayDate) {
    this.myDate = todayDate
  }
}

answered Sep 4, 2021 at 13:21

user14967413

1,4761 gold badge9 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

How to bind retrieved data from v-for to data object in Vuejs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related