Vue js : récupère la chaîne d'entrée et affiche-la, ainsi que la longueur de la chaîne

Question

Je souhaite obtenir une entrée de chaîne et l'afficher, ainsi que le nombre de caractères de la chaîne.

Besoin d'aide pour y arriver.

<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');

Merci d'avance.

Answer 1

Utilisez v-model pour currentSearchInput 绑定到输入。您根本不需要 saveInput.

{{currentSearchInput}} {{currentSearchInput.length}}

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

Votre code a currentSearchInput 和 currentUserInput. faute de frappe?