如何将从 v-for 检索到的数据绑定到 Vuejs 中的数据对象？

Question

我需要将使用 v-for 检索的数据（通过 props 从父级传递）绑定到数据对象。我试过 v-modal 但我无法让它工作。我正在使用 OpenWeatherApi，我只需要存储今天的日期，这样我就可以将它更改为另一种格式。

那么如何在我的数据对象的“时间”中存储 {{ data.dt }}？

<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>

谢谢。

Answer 1

不要在模板的 v-for 循环中分配任何属性值。而是创建另一个 computed 属性 来计算您需要的值。

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

如果你需要这个值直接在组件的 data 对象中，随后创建一个 watcher.

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

如何将从 v-for 检索到的数据绑定到 Vuejs 中的数据对象？

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

vue.js

vuejs2

v-for