时间戳

首页 > 解决方案 > 如何在vue中的另一个组件内以视觉方式显示数组中的值

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

问题描述

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

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

有人可以告诉我如何解决这个问题。

Childcomponent 方法和要复制的数组 该方法用数据填充此处的数组：

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>

标签： javascripttypescriptvue.jsvuejs2

解决方案

您的组件中有一个随机的 {{ 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>

这可能是问题吗？

推荐阅读