Vue.js 如何解决“问题”；此.refs.[ref_name].save不是一个函数"；在“a”中；v代表；创建组件？

我正在做一个带有一些积垢动作的表格列表。当我点击编辑图标时，我将打开一个对话框，其中包含3个“v-tabs-items”，通过一个“”v-for“”按钮

在最后一个v-tab中，我在菜单中有一个v-time-picker输入，并使用Vuetify文档的结构

<template>
<v-flex>
  <v-data-table>
    <!-- some data -->
  </v-data-table>
  <v-dialog
    v-model="dialog"
  >
    <v-card>
      <v-flex>
        <v-toolbar color="secondary" light tabs>
          <v-card-title>
            <span class="headline">{{ formTitle }}</span>
          </v-card-title>
          <v-spacer />

          <template v-slot:extension>
            <v-tabs
              v-model="tab"
              color="secondary"
              align-with-title
            >
              <v-tabs-slider color="accent" />
              <v-tab v-for="i in items" :key="i">
                {{ i }}
              </v-tab>
            </v-tabs>
          </template>
        </v-toolbar>

        <v-tabs-items v-model="tab">
          <v-tab-item v-for="i in items" :key="i">
            <v-card flat>
              <v-card-text v-if="i === 'Ad'" class="pa-0">
                <!-- Some Content -->
              </v-card-text>
              <v-card-text v-if="i === 'Content'" class="pa-0">
                <!-- Some Content -->
              </v-card-text>
              <v-card-text v-if="i === 'Target'" class="pa-0">
                <v-container grid-list-md>
                  <v-layout wrap>
                    <v-flex xs12 sm6 md6>
                      <v-menu
                        ref="time_picker"
                        v-model="dailyTimeMenu1"
                        :close-on-content-click="false"
                        :nudge-right="-15"
                        :return-value.sync="editedItem.daily_time_from"
                        lazy
                        transition="scale-transition"
                        offset-y
                        full-width
                        max-width="290px"
                        min-width="290px"
                      >
                        <template v-slot:activator="{ on }">
                          <v-text-field
                            v-model="editedItem.daily_time_from"
                            label="Time From"
                            prepend-icon="access_time"
                            readonly
                            outline
                            class="mr-2"
                            v-on="on"
                          />
                        </template>
                        <v-time-picker
                          v-if="dailyTimeMenu1"
                          v-model="editedItem.daily_time_from"
                          full-width
                          @click:minute="$refs.time_picker.save(editedItem.daily_time_from)"
                        />
                      </v-menu>
                    </v-flex>
                    <v-flex xs12 sm6 md6>
                      <v-menu
                        ref="time_picker"
                        v-model="dailyTimeMenu2"
                        :close-on-content-click="false"
                        :nudge-right="-15"
                        :return-value.sync="editedItem.daily_time_to"
                        lazy
                        transition="scale-transition"
                        offset-y
                        full-width
                        disabled
                        max-width="290px"
                        min-width="290px"
                      >
                        <template v-slot:activator="{ on }">
                          <v-text-field
                            v-model="editedItem.daily_time_to"
                            label="Time to"
                            prepend-icon="access_time"
                            readonly
                            outline
                            v-on="on"
                          />
                        </template>
                        <v-time-picker
                          v-if="dailyTimeMenu2"
                          v-model="editedItem.daily_time_to"
                          full-width
                          @click:minute="$refs.time_picker.save(editedItem.daily_time_to)
                        />
                      </v-menu>
                    </v-flex>
                  </v-layout>
                </v-container>
              </v-card-text>
              <v-card-actions>
                <v-spacer />
                <v-btn color="blue darken-1" flat @click="close">
                  Cancel
                </v-btn>
                <v-btn color="blue darken-1" flat @click="saved">
                  Save
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-tab-item>
        </v-tabs-items>
      </v-flex>
    </v-card>
</v-dialog>
</v-flex></template>

{{formTitle}}
{{i}
由于您在
v-for
中使用了
ref=“time\u picker”
，
这个.$refs.time\u picker
实际上是一个数组。因此，您需要在中跟踪索引

<v-tab-item v-for="(i, idx) in items" :key="i">

编辑：您还需要使用ref
time\u picker
将第二个v-menu重命名为其他名称，因为现在您所指的元素不明确。
Vuetify
v-menu
组件似乎没有公开
save（）
方法。实际上，OP也在使用
ref=“time\u picker”
组件上的
，因此这也不起作用。嗨，这在代码中仍然不起作用。我仍然得到同样的错误。感谢朋友们的帮助。当我使用0索引时，它起作用了。i、 e.``javascript$refs.time\u picker[0]``@点击：分钟=“$refs.time\u picker[idx]。保存（editItem.daily\u time\u to）``在此处，而不是```
<v-tab-item v-for="(i, idx) in items" :key="i">

@click:minute="$refs.time_picker[idx].save(editedItem.daily_time_to)