Laravel 新星 |箭头函数 |计算 属性 在 Tool.vue 中不工作

Question

我有一个无法正常工作的计算 属性。在阅读文档时，Vue 2.x 应该这样做。我的代码：

<template>
<div>
    <button :disabled="isDisabled">Import configurator data</button>
    <input class="input" type="file" id="file" v-on:change="setFile">
</div>
</template>

<script lang="js">
export default {
  data: () => {
    return {
      importDisabled: true,
    }
  },

  computed: {
    isDisabled() {
      return this.importDisabled;
    },
  },

  methods: {
    setFile: (e) => {   
      this.importDisabled = false;
    },
  }
}
</script>

预期行为：选择文件时启用按钮。 实际行为：按钮保持禁用状态。

我在这里错过了什么？ isDisabled() 方法中的 console.log 显示它只被调用一次。 importDisabled 变化后不调用。

其他信息： vue 2.6.12 laravel nova

另请注意：Vue 工具不会在检查器中检测到 Vue 组件。但是加载工具时 Vue 行为正常。

Answer 1

箭头函数似乎绑定到父上下文。这就是我的代码不起作用的原因。 this 未绑定到 Vue 实例，而是绑定到父级 (Window)，这导致它无法工作。

错误：

setFile: (e) => {   
  this.importDisabled = false;
},

右：

setFile: function() {   
  this.importDisabled = false;
},

更多信息： https://codingexplained.com/coding/front-end/vue-js/using-es6-arrow-functions-vue-js