Para trabajar con el control HTML 'textarea' debemos tener en cuenta que la interpolación no funciona, debemos definir la directiva v-model y asociarla con nuestro modelo de datos.
Mostrar un control de tipo textarea. Cada vez que se ingrese un caracter actualizar la cantidad ingresados dentro del control.
No permitir cargar más de 200 caracteres.
<!doctype html>
<html>
<head>
<title>Prueba Vue</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="aplicacion">
<p><textarea v-model="comentarios" cols="100" rows="5" maxlength="200"></textarea></p>
<p>Cantidad de caracteres ingresados: {{comentarios.length}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app=new Vue({
el: '#aplicacion',
data:{
comentarios:''
}
})
</script>
</body>
</html>
Cantidad de caracteres ingresados: {{comentarios.length}}
Asociamos el control textarea con el modelo de datos mediante la directiva v-model:
<p><textarea v-model="comentarios" cols="100" rows="5" maxlength="200"></textarea></p>
Cada vez que hay un cambio en el modelo se actualiza la vista mostrando la cantidad de caracteres que tiene la propiedad 'comentarios' accediendo al atributo length del string:
<p>Cantidad de caracteres ingresados: {{comentarios.length}}</p>
Para solo permitir ingresar hasta 200 caracteres se resuelve en HTML iniciando la propiedad maxlength con el valor 200.