Eslint vue/no-mutations-props

[PierreFichet]

Hi all,

I ran into some issues with the eslint vue rules, particularly vue/no-mutations-props:

Mutating a prop locally is now considered an anti-pattern, e.g. declaring a prop and then setting this.myProp = 'someOtherValue' in the component. Due to the new rendering mechanism, whenever the parent component re-renders, the child component’s local changes will be overwritten.

The issue are in clickKey and setFocusToInput methods:
this.input.value = text (line 266)
this.input.selectionStart = caret.start (286)
this.input.selectionEnd = caret.end (line 287)

The workaround I made is the following:

I created an event listener on the parent component:

<vue-touch-keyboard  <props> v-on:update-form="keyboardUpdate" />

---- in component methods
    keyboardUpdate (d) {
      this.keyboard.input[d.key] = d.value
    }

In keyboard.vue, I replaced the above mentioned lines by:
this.input.value = text => this.$emit('update-form', { key: 'value', value: text })

this.input.selectionStart = caret.start => this.$emit('update-form', { key: 'selectionStart', value: caret.start })

this.input.selectionEnd = caret.end => this.$emit('update-form', { key: 'selectionEnd', value: caret.end })

Hope it serves other people!