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

【问题标题】：How to bind retrieved data from v-for to data object in Vuejs?如何将检索到的数据从 v-for 绑定到 Vuejs 中的数据对象？
【发布时间】：2021-11-02 08:18:49
【问题描述】：

我需要将使用 v-for 检索到的数据（通过来自父级的道具传递）绑定到数据对象。我尝试使用 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>

谢谢。

【问题讨论】：

标签： vue.js vuejs2 v-for

【解决方案1】：

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

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

如果您需要此值直接位于组件的data 对象中，请随后创建一个观察者。

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

【讨论】：