How to count the number of rows?

Question

Vue.js

How to display number of lines in textarea?

<b-form-textarea
                v-model="text"
                id="mytextarea"
                placeholder="Введите"
                class="form-control form-control-lg"
                rows="10"
              >
</b-form-textarea>

And if we enter:
Line 1
Line 2
Line 3
...
Line 500

He brought us 500 in the corner.

The most banal is
document.getElementById('mytextarea').value.split('\n').length-1
But even if so, how can you shove it into the lower right corner?

Answer 1

computed: {
  linesCount() {
    return 1 + (this.text.match(/\n/g)?.length ?? 0);
  },
},

<div>{{ linesCount }}</div>

Answer 2

el.value.split(/\r?\n|\r/).length
Create a div, insert a counter into the div, position it there by wrapping the field in another div, relative to which you position your counter div

Answer 3

The text from the textarea is stored in a variable that is bound to the textarea using v-bind

<template>
  <div> {{ text.split(/\r?\n|\r/).length + 1 }} </div>
</template>

To make the template cleaner, you can use computed