Question

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

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

我没有更改代码 - 只使用了original code from the VuetifyJS example：

 <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和所有依赖项更新到最新版本，但它没有帮助。这个错误来自哪里？欢迎任何想法。

更新：我在App.vue的Vuetify示例中添加了相同的未更改代码，但它仍然有效，但仍然没有HelloWorld.vue - 任何想法？

Answer 1

@Tom，我不确定你是否还会遇到这个问题。

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

来自Vue docs：

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

你需要使用@click =“$ refs.dialog [index - 1] .save（time）”而不是。

Answer 2

来自official docs：

$ refs仅在组件渲染后填充，并且他们不是被动的。它只是作为直接逃生舱儿童操纵 - 你应该避免从内部访问$ refs 模板或计算属性。

所以你需要做的是创建一个方法处理程序。

<v-btn flat color="primary" @click="save(time)">OK</v-btn>

在你的javascript中，使用具有ref属性的子引用调用save函数，如下所示：

export default {
  data() {
    return {
      time: null,
      menu2: false,
      modal2: false
    }
  },
  methods: {
    save(time) {
      this.$refs.dialog.save(time)
    }
  }
}

Answer 3

我也有这种错误，我做了console.log这个this。$ ref.dialog，发现它是一个数组，所以我将代码修改为this。$ refs.dialog [0] .save（）。

methods: {
    save(time) {
      this.$refs.dialog[0].save(time)
    }
  }

Answer 4

我从vutify复制时遇到了同样的问题。我将元素复制了两次，因此这两个元素具有相同的引用，在这里我尝试从两个引用中触发save函数=>冲突=>，因此，如果遇到问题，请检查引用。

例如：如果您有第一个=> ref =“ dialog”，则使第二个=> ref =“ dialog2”

VuetifyJS

4 个答案: