Posteriormente a consultar expertos en esta materia, programadores de diversas ramas y maestros dimos con la respuesta a la interrogande y la dejamos plasmada en esta publicación.
Solución:
Este es uno de esos casos en los que realmente desea utilizar un componente.
Aquí está un componente de ejemplo que hace un textarea y limita la cantidad de texto.
Tenga en cuenta: esto no es una producción lista, maneje todos los componentes de las cajas de las esquinas. Está pensado como un ejemplo.
Vue.component("limited-textarea",
props:
value: type: String, default: "",
max:type: Number, default: 250
,
template: `
`,
computed:
internalValue:
get() return this.value,
set(v) this.$emit("input", v)
,
methods:
onKeyDown(evt)
if (this.value.length >= this.max)
if (evt.keyCode >= 48 && evt.keyCode <= 90)
evt.preventDefault()
return
)
Este componente implementa v-model y solo emite un cambio en los datos si la longitud del texto es menor que el máximo especificado. Lo hace escuchando keydown y evitando la acción predeterminada (escribir un carácter) si la longitud del texto es igual o superior al máximo permitido.
console.clear()
Vue.component("limited-textarea",
props:
value: type: String, default: "",
max:type: Number, default: 250
,
template: `
`,
computed:
internalValue:
get() return this.value,
set(v) this.$emit("input", v)
,
methods:
onKeyDown(evt)
if (this.value.length >= this.max)
if (evt.keyCode >= 48 && evt.keyCode <= 90)
evt.preventDefault()
return
)
new Vue(
el: "#app",
data:
text: ""
)
Otro problema con el código en la pregunta es que Vuex no le permitirá establecer un valor de estado directamente; tienes que hacerlo a través de una mutación. Dicho esto, debería haber una mutación de Vuex que acepte el nuevo valor y lo establezca, y el código debería confirmar la mutación.
mutations:
setGiftMessage(state, message)
state.user.giftMessage = message
Y en tu Vue:
computed:
giftMessage:
get()return this.$store.state.user.giftMessage,
set(v) this.$store.commit("setGiftMessage", v)
Técnicamente, el código debería estar usando un getter para obtener el usuario (y es giftMessage), pero esto debería funcionar. En la plantilla usarías:
Aquí hay un ejemplo completo usando Vuex.
console.clear()
const store = new Vuex.Store(
state:
user:
giftMessage: "test"
,
getters:
giftMessage(state)
return state.user.giftMessage
,
mutations:
setGiftMessage(state, message)
state.user.giftMessage = message
)
Vue.component("limited-textarea",
props:
value: type: String, default: "",
max:type: Number, default: 250
,
template: `
`,
computed:
internalValue:
get() return this.value,
set(v) this.$emit("input", v)
,
methods:
onKeyDown(evt)
if (this.value.length >= this.max)
if (evt.keyCode >= 48 && evt.keyCode <= 90)
evt.preventDefault()
return
)
new Vue(
el: "#app",
store,
computed:
giftMessage:
get() return this.$store.getters.giftMessage,
set(v) this.$store.commit("setGiftMessage", v)
)
Message: giftMessage
Lamento interrumpir. Estaba buscando una solución. Los miré a todos. Para mí se ven demasiado complicados. Siempre busco la sencillez. Por eso me gusta la respuesta de @Даниил Пронин. Pero tiene el de @J. Rambo notó un problema potencial.
Para mantenerse lo más cerca posible del elemento de texto html nativo. La solución que se me ocurrió es:
Plantilla Vue