Как передать значение переменной в компонент?

Question

[myskypesla]

Есть вот такой App.vue:

<div id="app">
  <input type="text" v-model="person" placeholder="Введите имя" @keyup.enter="onKeyUp">
  <router-view></router-view>
</div>

export default {
  name: 'app',
  data () {
    return {
      person: '',
      accountId: '',
      name: '',
      age: '',
      resourceUrl: '',
      resourceInfo: ''
    }
  },
  methods: {
    onKeyUp: function () {
      this.$Progress.start()

      let resourceUrl = 'ссылка на ПЕРВЫЙ json из api в котором есть имя и id'

      this.$http.get(resourceUrl).then(function (response) {
        this.name = response.data.name // берём имя из ПЕРВОГО файла json
        this.accountId = response.data.account_id // берём id из ПЕРВОГО файла json

        let accountId = this.accountId

        let resourceInfo = 'ссылка на ВТОРОЙ json из api в котором лежит информация, которую получаем по accountId' + accountId

        this.$http.get(resourceInfo).then(function (response) {
          this.age = response.data.age // забираем из ВТОРОГО json возраст
        })
      })
    }
  }
}

И есть компонент Hello, который является маршрутом:

<div class="hello">
    <div v-if="name">
      <h1>Имя из ПЕРВОГО json: {{ name }}</h1>
      <h2>Возраст из ВТОРОГО json: {{ age }}</h2> 
    </div>
    <div v-else>
      <h1>Введите ваше имя</h1>
    </div>
  </div>

Нужно сделать чтобы при вводе в input имя человека, запрос отправлялся в базу, затем шел переход к маршруту Hello и в нём заполнялось name и age.

Когда у меня код маршрута Hello находиться в App.vue то всё работает, а как только я этот код оставляю в компоненте Hello, то ничего не работает, скорее всего из-за того что пока что этого маршрута не существует.

Помогите пожалуйста разобраться?

Answer 1

[Evgeny Kulakov]

Вам нужно добавить маршрут, который будет отображать компонент Hello. И далее перейти на этот маршрут после получения данных, вызвав router.push.

Comments

[myskypesla]

Evgeny Kulakov сделал как вы посоветовали, но переменные забываются видимо, потому что приходят значения во front мне NaN

[Evgeny Kulakov]

Вам стоит посмотреть как vue компоненты взаимодействуют. В данном случае вам нужно передать из app в hello имя и возраст. Т.е. добавить соответствующие пропсы для hello, и при вызове router.push передать их вторым параметром. В доке роутера все есть.

[myskypesla]

Evgeny Kulakov: Что-то вообще не получается Евгений. А можно вам проект сбросить куда-нибудь? Чтобы Вы посмотрели на ошибку?

[Evgeny Kulakov]

Моя почта в профиле

[myskypesla]

Evgeny Kulakov: Отписался, спасибо.