Question

我想在 props 传递的处理程序中缓存状态。

问题是，模板渲染和文本内容变化良好，但控制台总是抛出错误：

[Vue 警告]：v-on 处理程序中的错误：“TypeError：无法读取未定义的属性 'apply'”

以下代码：

<template>
  <picker-box :options="item.options" @change="handlePickerChange($event, item)">
    <text>{{ item.options[getPickerValue(item)].text }}</text>
  </picker-box>
</template>

<script>
  export default {
    props: {
      item: {
        type: Object,
        default() {
          return {
            options: [{ text: 'op1' }, { text: 'op2' }],
            handler: {
              current: 0,
              get() {
                return this.current
              },
              set(value) {
                this.current = value
              },
            },
            /* I also tried this: */
            // new (function () {
            //   this.current = 0
            //   this.get = () => {
            //     return this.current
            //   }
            //   this.set = (value) => {
            //     this.current = value
            //   }
            // })(),
          }
        },
      },
    },
    methods: {
      handlePickerChange(value, item) {
        item.handler.set(value)
      },
      getPickerValue(item) {
        return item.handler.get()
      },
    },
  }
</script>

我知道使用 data() 或模型道具很容易，但我希望将其视为 handler.current，换句话说，我只想知道为什么这个处理程序对象不正确（语法层)，我该如何解决。

Answer 1

你到底想通过什么状态？如果您需要跟踪静态属性，您可以使用客户端的 localstorage 或观察者。如果您需要保留更多动态数据，您可以将其传递给一个计算属性，该属性会在每次更改时跟踪并设置它们。

如何将对象处理程序传递给 vue 组件

1 个答案: