I have a new concept for an input component where different objects can be passed, displayed as CSV, and allow for text editing/validation with style changes based on validation results. Check out the code snippet I've been working on:
<div id="vue">
<base-input :cslice="c.workspace"></base-input>
</div>
Javascript:
(function () {
Vue.component('base-input', {
props: ['cslice'],
data: function () {
return {
colors: ['red', 'white', 'yellow', 'green', 'orange', 'purple'],
ind: 1
}
},
computed: {
str: {
get: function () {
return Object.values(this.cslice).join(", ");
},
set: function (val) {
if(val.indexOf('0'))
this.ind = Math.floor(this.colors.length * Math.random());
},
},
styleObj: {
get: function () {
return { color: this.colors[this.ind] };
},
set: function () {
},
}
},
template: '<div><input v-model="str" :style="styleObj" type="text"/></div>'
});
let vue = new Vue({
el: '#vue',
data: {
c: {},
},
created: function () {
this.c = Object.assign({}, this.c, {
workspace: { width: 820, height: 440 },
});
},
});
})();
Take a look at the fiddle demonstration: https://jsfiddle.net/tfoller/sz946qe2/3/
The current issue is that I can only delete the last character if the new style matches the current one, making the text practically uneditable. How can I resolve this problem to enable normal text editing in the input field?