Vue.Js При нажатии на кнопу получить данные с инпута?

Question

[Beck92]

Ситуация такая есть такой вот код:

<f7-list form id="address-form">
  <!-- Textarea -->
  <f7-list-item>
  <f7-input type="textarea" placeholder="Default address" id="address"  v-model.text="address"></f7-input>
  </f7-list-item>
  </f7-list>
  <!-- Button Nex -->
  <f7-block>
  <f7-button class="" value="1" id="btnPageAdress" href="#" @click="getFormValues()">Next</f7-button>
  </f7-block>

Ну и скрипт

<script>
    export default {
    name: 'app',
      data() {
          return {
            address: ''
          }
        },
      methods: {
        getFormValues () {
            var sendAddess = this.address
            console.log(this.sendAddess)
        }
      }
        }
</script>

Не понимаю чего не работает. Может кто-то помочь.

Answer 1

[Дима Паутов]

Накой чёрт такой атрибут? v-model.text
Пишется просто, v-model="address"

И не нужно ничего переменной присваивать, просто вывели в консоль значение свойства

getFormValues () {
  console.log(this.address)
}

Comments

[Beck92]

Там не все так просто. (кончено v-model.text, текст тут лишний). Если сразу сделать вывод в консоль, то там будет пусто. Поскольку (активности) фокус еще не было на инпуте. Но при загрузке странице туда уже приходит адрес от гугла. (Я пока писал понял что туда нужно поставить что-то тип Вотчера с маленьким таймером и что бы он куда-то записывал данные, а по кнопке просто они будут отправятся, но я ток начал учить и еще плохо это представляю, если можешь помоги)

[Дима Паутов]

Beck92, чаво чаво? Что ещё за адрес от гугла?

[Beck92]

Дима Турков, Ну ты года открываешь на телефоне это приложение то оно спрашивает у тебя разращение на отслеживание твоих координат, и тогда твое место положение пишутся в данный инпут через геодекодинг. Но суть не в этом, можешь ли ты подсказать как мне считывать просто с инпута данные. Просто смотри если гугл правильно определил позицию и тип пользователь не будет коректировать данные то тогда не будет записи в переменной и ее нельзя будет обработать на отправку на сервер, просто если он будет, то будут активность по инпуту и тогда данные будут пушится в переменную address.

[Дима Паутов]

Beck92,

mounted(){
//... Получили данные о локации

this.address = // Переменная с координатами, в виде строки 56.3225851, 44.0007071
}

[Beck92]

Дима Турков, я только начинаю работать с Vue, но мне кажется ты чет усложняешь ( И еще я не представляю как мне обращаться к гугл коду что бы сделать вот это сто ты предложи "//... Получили данные о локации
this.address = // Переменная с координатами, в виде строки 56.3225851, 44.0007071"). Разве нельзя сделать все проще, что бы просто по нажатию кнопки считывался данные с инпута и записывались в какую-то переменную?

[Дима Паутов]

Beck92, я не понимаю, при чём тут тогда гугл? Если тебе нужно получить данные из значения поля. Я 1й пример написал, как это сделать. Ты уже связал переменную address в блоке data со значением у поля. Как только у поля измениться это значение, оно автоматом присвоится переменной address и наоборот. Как только изменится значение переменной address, значение из этой переменной сразу занесётся в значение поля

[Beck92]

Дима Турков, Та гугл тут не причем, про него можно в принципе в общее забыть. Я описывал ситуацию откуда в инпуте берется текст. И описывал проблему, что когда там появляется текс (от гугла) то он не записывает, как ты говоришь, сразу в address, а записывает только аж после того когда на инпут нажмут и поставят букву или пробел (будет активность по инпуту, не фокус даже) и из за этого когда я чекаю переменную через консолЛог он мне выдает пустую строку. А когда я делаю какое-то изменении в инпути, и чекаю консоЛог address , то тогда он показывает.

[Дима Паутов]

Beck92, вот уже интересней. Тогда попробуйте сделать вручную добавление значение в переменную при событии input. Событие инпут влияет как бы на любое изменение

<f7-input 
  type="textarea" 
  placeholder="Default address" 
  id="address" 
  v-model="address" 
  @input="onInput()"
/>

methods: {
onInput(event){
this.address = event.target.value;
}
}

[Beck92]

Дима Турков, Пишет
[Vue warn]: Error in event handler for "input": "TypeError: Cannot read property 'target' of undefined"

и то это после того когда я что-то сделаю в инпуте, а так при загрузке консоЛог пустой

[Beck92]

Дима Турков,

methods: {
      	onInput(event){
			console.log(this.address)
			}
      }

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

[Дима Паутов]

Beck92, такс, тогда так:

<f7-input 
  type="textarea" 
  placeholder="Default address" 
  id="address" 
  v-model="address" 
  ref="address"
/>

mounted(){
this.address = this.$refs.address.value;
}

[Beck92]

Дима Турков, Не, смотри сделал вот так, и как не проверял, в addresss приходят данные только после изменения инпута.

export default {
	name: 'app',
      ready() {
          return {
            address: ''
          }
        },
      mounted(){
			this.address = this.$refs.address.value;
			},
      methods: {
        getFormValues () {
			var sendAddess = this.address;
        	console.log(this.address) // console.log(this.sendAddess)
        }
      }
		}

[Дима Паутов]

Beck92, хмм.... Видимо автокомплит самого браузера обходит все события, тем самым проходит мимо реактивности vue. Отключите автокомплит у поля autocomplete="off"

[Beck92]

Дима Турков, Не ( Я добавил даже все варианты но все равно только после изменения формы

<f7-list-item>
							      <f7-input type="textarea" placeholder="Default address" id="address"  v-model="address" ref="address" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></f7-input>
							    </f7-list-item>

[Beck92]

Дима Турков, Слушай. Мне опять в голову идея пришла, что может добавить все таки вотчер который просто считает через секу данные и запишет их в address?

[Дима Паутов]

Beck92, да можешь и его. Но только я не уверен, что это сработает. Т.к. как только значение в переменной или в интуте изменятся, она сразу синхронизируются. Вот в этом дело. Скачай плагин в хром vue. Там ты сможешь видеть все данные, которые хранят компоненты. Это очень удобно и увидишь

Answer 2

[Александр Гамов]

var sendAddess = this.address
console.log(this.sendAddess)

this тут лишний. Переменная создана внутри функции (и тут логичнее было бы let а не var).

Comments

[Александр Гамов]

А вообще ставь расширение для браузера Vue.js devtools и отладка ускорится в разы.