Vue js: Get the input string and display it, and also get the length of the string
P粉785522400
P粉785522400 2024-02-21 15:54:16
0
1
521

I want to get a string input and display it, along with the number of characters of the string.

Need help to implement.

<section id="app">
      <h2>Learn  Vue Works</h2>
      <input type="text" @input="saveInput">
      <button @click="setText">Set Text</button>
    <br>

   <p>{{ qry }} {{ message }}</p>

====app.js======================================

const app = Vue.createApp({
  data() {
    return {
      message: 'Vue is great!',
      qry: 'Query String : ',
      currentSearchInput: '',
    };
  },
  methods: {
    setText() {
      this.message = this.currentUserInput;
    },
   saveInput(event) {
      this.currentUserInput = event.target.value;
   },
  },
});

app.mount('#app');

Thanks in advance.

P粉785522400
P粉785522400

reply all(1)
P粉788765679

Use v-model to bind currentSearchInput to the input. You don't need to saveInput at all.


{{currentSearchInput}} {{currentSearchInput.length}}
setText() {
      this.message = this.currentSearchInput;
    },

Your code has currentSearchInput and currentUserInput. typo?

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template