如何在vue中的另一个组件内以视觉方式显示数组中的值

Question

我有一个 vue 应用程序，我将一个数组从一个组件发送到另一个组件。哪个有效。但现在我想直观地展示这一点。我的意思是这样的：

数组 1 里面有字段日期和时间，它被复制到父数组 2 我可以记录这个，但是如果我想显示一个特定的值，例如日期本身，它不会显示任何内容并给出属性可以的错误不被阅读。我尝试循环遍历父数组，但它不起作用导致无法读取属性错误。

谁能给我指点一下如何解决这个问题。

要复制的子组件方法和数组 该方法在这里用数据填充数组：

data: () => ({
    selectedTime: [],

    dates: [{date : new Date().toISOString().substr(0,10), time: []}],
   
  }),

  methods:{
      addTimeFields(){

        this.selectedTime.push({
          startTime:"",
          endTime: "",
        })
        this.dates[0].time.push(
        this.selectedTime
          )

      },

应该在此处获取数组的父组件我正在尝试将数组从子数组推送到有效的父数组（保存方法）但是当我尝试循环时它给了我一个错误：

 <v-card-text v-for="(i,index) in finalDate">
      <v-btn >
        {{i.finalDate}}
      </v-btn>

    </v-card-text>

    <v-divider class="mx-4"></v-divider>

    <v-card-actions>
      <v-spacer />

      <v-col>
        <vs-button>Generate Meeting Link</vs-button>

      </v-col>
      {{finalDate}}
    </v-card-actions>
  </v-card>
</template>

<script>
import MeetingsTableComponent from "@/components/MeetingsTableComponent";
import DatePickerComponent from "@/components/DatePickerComponent";

export default {
  name: "NextMeetingCardComponent",
  components: { DatePickerComponent },
  data: () => ({
    dialog: false,
    finalDate: [],
    menu: false,
    modal: false,
    menu2: false
  }),

  methods:{
    save() {
      this.finalDate.push(
        this.$refs.datepicker.dates
      )

    }

错误：

[Vue warn]: Property or method "date" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <NextMeetingCardComponent>
       <DashboardComponent> at src/views/DashboardComponent.vue
         <VMain>
           <VApp>
             <App> at src/App.vue
               <Root>

Answer 1

您的组件中有一个随机的 {{ date }}：

 <v-card-text v-for="(i,index) in finalDate">
      <v-btn >
        {{i.date}}
      </v-btn>

    </v-card-text>

    <v-divider class="mx-4"></v-divider>

    <v-card-actions>
      <v-spacer />

      <v-col>
        <vs-button>Generate Meeting Link</vs-button>

      </v-col>
      {{date}} <---- HERE
    </v-card-actions>
  </v-card>
</template>

这可能是问题吗？