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.
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:
.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>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.
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?
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;
},