时间戳

首页 > 解决方案 > VuetifyJS 中的“TypeError：_vm.$refs.dialog.save 不是函数”

javascript - VuetifyJS 中的“TypeError：_vm.$refs.dialog.save 不是函数”

问题描述

我正在将 VueJS 与 VuetifyJS 一起使用，一旦我尝试通过单击“确定”按钮来节省时间，就会收到此错误：

[Vue 警告]：“click”的事件处理程序出错：“TypeError：_vm.$refs.dialog.save 不是函数”

我没有更改代码 - 只是使用了 VuetifyJS 示例中的原始代码：

 <v-flex xs11 sm5>
  <v-dialog
    ref="dialog"
    v-model="modal2"
    :return-value.sync="time"
    persistent
    lazy
    full-width
    width="290px"
  >
    <v-text-field
      slot="activator"
      v-model="time"
      label="Picker in dialog"
      prepend-icon="access_time"
      readonly
    ></v-text-field>
    <v-time-picker v-model="time" actions>
      <v-spacer></v-spacer>
      <v-btn flat color="primary" @click="modal2 = false">Cancel</v-btn>
      <v-btn flat color="primary" @click="$refs.dialog.save(time)">OK</v-btn>
    </v-time-picker>
  </v-dialog>
</v-flex>

<script>
  export default {
    data () {
      return {
        time: null,
        menu2: false,
        modal2: false
      }
    }
  }
</script>

同样，一旦选择器出现，它后面的网站就不再可见 - 上面应该只有一个黑色的覆盖层。

我尝试将 NodeJS 和所有依赖项更新到最新版本，但没有帮助。这个错误来自哪里？欢迎任何想法。

更新：我将 Vuetify 示例中相同的未更改代码放入其中，App.vue但它仍然有效，但仍然没有HelloWorld.vue- 有什么想法吗？

标签： javascriptvue.jsvuetify.js

解决方案

@Tom，我不确定您是否仍然面临这个问题。

如果对话框位于“v-for”内，则需要遵循以下方法。

来自 Vue 文档：

当 ref 与 v-for 一起使用时，你得到的 ref 将是一个包含镜像数据源的子组件的数组。

您需要改用 @click="$refs.dialog[index - 1].save(time)" 。

推荐阅读