0👍
This doesn’t quite properly answer the question (can’t recall why this solution worked) but it’s an attempt to help @Jeppebm. So I can’t recall the precise reason why but the following was what I ended up with:
var ternaryToggle = Vue.component('ternary-toggle', {
props: ['displayText', 'toggleId'],
data: function() {
return {
state: 'neutral',
stateTransitions: {
neutral: 'include',
include: 'exclude',
exclude: 'neutral'
}
}
},
methods: {
toggle: function() {
this.state = this.stateTransitions[this.state]
this.$emit('switched', this.toggleId, this.state)
}
},
template: '<span v-bind:class="state + \' btn btn-small\'" v-on:click="toggle">{{ displayText }}</span>'
});
I think the overall conclusion I came to might have been to just ditch the custom directive for this effort.
Source:stackexchange.com