Laravel Nova | Arrow functions | computed property not working in Tool.vue

Question

I have a computed property that is not working correctly. When reading the docs this is how it should be done for Vue 2.x. The code i have:

<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>

Expected behaviour: Button enables when a file is selected. Actual behaviour: Button stays disabled.

What am i missing here? A console.log within the isDisabled() methods shows it is only called once. It is not called after importDisabled changes.

Other info: vue 2.6.12 laravel nova

Also note: Vue tools does not detect a Vue component in the inspector. But the Vue behaviour is working when loading the tool.

Answer 1

It seems arrow functions are bound to the parent context. That was the reason my code did not work. this is then not bound to the Vue instance but the parent (Window) which causes it not to work.

Wrong:

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

Right:

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

More information: https://codingexplained.com/coding/front-end/vue-js/using-es6-arrow-functions-vue-js