Ребят, только делаю первые шаги в изучении. Подскажите, почему так

Question

Ребят, только делаю первые шаги в изучении. Подскажите, почему так

происходит? (Заранее говорю, что знаю, что это можно сделать через v-model, но просто хочу понять, в чем проблема)

Есть простейший темплейт
<template>
<p>Hello {{ textString }}</p>
<input type="text" :value="inputString" @input="changeHelloString">
</template>

Есть скрипт
<script>
export default {
data() {
return {
textString: '',
inputString: ''
}

},
methods: {
changeHelloString(event) {
this.textString = event.target.value
}
}
}
</script>

Вопрос. Почему при таком раскладе я не вижу дублирование из ИНПУТА рядом с текстом Hello? Точнее при попытке ввода в инпут я вижу первый символ, потом он заменяется на второй, третий и т.д.... В итоге введя слово МИР я вижу Hello P ??? Объясните плиз, где я ошибаюсь и что сделал не так? Спасибо.

#frontend #javascript #programming #russian #vue.js

0

20.11.2021

4 ответов

20 просмотров

Artyom Tuchkov

зачем там 2 переменные?

0

20.11.2021

Dmitry Автор вопроса

Artyom Tuchkov
зачем там 2 переменные?

ЭЭмммм, убрал :value и все заработало, но! хотелось бы узнать, почему в моем варианте не работает? Т.е. получается, что как только срабатывает моя функция changeHelloString() она снова вызывает return из data() и мои значения как бы перезаписываются? Странная логика...ну, да ладно... двигаемся дальше...Спасибо.

0

20.11.2021

Artyom Tuchkov

Dmitry
ЭЭмммм, убрал :value и все заработало, но! хотелос...

ничего там странного нет, ты байндишь пустую строку к инпуту каждый раз, отсюда его значение сбрасывается убери 1 переменную и юзай вторую как для байндинга, так и для отрисовки значения

0

20.11.2021

Alan · Accepted Answer

Alan

:value="inputString" попробуй убрать

0

20.11.2021

169 похожих чатов

Ребят, только делаю первые шаги в изучении. Подскажите, почему так

4 ответов

Похожие вопросы