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

Question

我正在将VueJS与VuetifyJS结合使用，当我尝试通过单击“确定”按钮以节省时间时，就会出现此错误：

[Vue警告]：事件处理程序中的“单击”错误：“ 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-有什么想法吗？

Answer 1

@汤姆，我不确定你仍然会遇到这个问题。

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

从Vue文档：

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

您需要使用@click =“ $ refs.dialog [index-1] .save（time）”代替。