Me gustaría obtener la entrada de cadena y mostrarla, también el número de caracteres de la cadena.
Necesito ayuda para darme cuenta.
<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');Gracias por adelantado.
Si desea dar a sus usuarios control sobre cómo guardar el valor de un <input> , hay dos formas de hacerlo en 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 es una directiva para el enlace de datos bidireccional del valor de un elemento de formulario al modelo. Puede conceptualizar la actualización del modelo como "instantánea" (se realiza mediante un oyente de input ).
Al igual que en el primer ejemplo, puede mantener un valor saved por separado y sobrescribirlo cuando el usuario haga clic en el botón:
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> La diferencia entre los dos ejemplos es que en el primero el modelo contiene una referencia al elemento <input> real (que le da acceso a todos sus accesorios y métodos nativos), mientras que en el segundo state.input solo contiene el <input> valor del elemento.
Vincule su currentSearchInput a la entrada usando v-model. No necesita saveInput en absoluto.
<input v-model='currentUserInput' type="text" /> {{currentSearchInput}} {{currentSearchInput.length}} setText() { this.message = this.currentSearchInput; }, Su código tiene currentSearchInput y currentUserInput . ¿Error de tipografía?
Sí, estoy de acuerdo con Steven. No es necesario utilizar la función saveInput . Simplemente use v-model="currentUserInput" y luego, al hacer clic en el botón, configúrelo así;
setText() { this.message = this.currentUserInput; },