I would like to get the string input and display it , also number of charactrs of the string.

Need help to realize.

    <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.

CodePudding user response：

Bind your currentSearchInput to the input using v-model. You do not need saveInput at all.

<input v-model='currentUserInput' type="text" />
{{currentSearchInput}} {{currentSearchInput.length}}

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

Your code has currentSearchInput and currentUserInput. Typo?

CodePudding user response：

Yes, I agree with Steven. Don't need to use saveInput function. Just use v-model="currentUserInput" and then when clicking the button, just set like that;

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

CodePudding user response：

If you want to give your users control over saving the value of an <input>, there are two ways to go about it, in Vue 3:

1. Using a teplate ref on the input element and getting it's .value:

const { createApp, reactive, toRefs } = Vue;

createApp({
  setup() {
    const state = reactive({
      saved: '',
      input: null
    });
    return {
      ...toRefs(state),
      updateValue: () => { state.saved = state.input.value }
    }
  }
}).mount('#app')

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="app">
  <input ref="input" type="search">
  <button @click="updateValue">Save</button>
  <pre v-text="{ saved, ['saved.length']: (saved && saved.length) || 0 }" />
</div>

2. Using the v-model directive

v-model is a directive for two-way data-binding a form element's value to the model. You can conceptualize the model update as "instantaneous" (it's done using a input listener).
Just like in the first example, you can keep a separate saved value, and overwrite it when the user clicks the button:

const { createApp, reactive, toRefs, computed } = Vue;

createApp({
  setup() {
    const state = reactive({
      saved: '',
      input: '',
    });
    const logger = computed(() => ({
      ...state,
      ['saved.length']: state.saved.length || 0,
      ['input.length']: state.input.length || 0
    }));
    return {
      ...toRefs(state),
      logger,
      updateValue: () => { state.saved = state.input }
    }
  }
}).mount('#app')

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="app">
  <input v-model="input" type="search">
  <button @click="updateValue">Save</button>
  <pre v-text="logger" />
</div>

The difference between the two examples is that in the first one the model holds a reference to the actual <input> element (giving you access to all its native props & methods), while in the second one state.input only holds the <input> element's value.