Как подставить значение в input при получении запроса?

Question

[danilr]

При нажатии на кнопку - происходит action c мутациями и открывается компонент, проблема в том, что если я не использую вычисляемое свойство для установки получаемого значения, то у меня не успевает подгружаться значение из vuex и поэтому значение не устанавливается. А если использую вычисляемое свойство, то он не дает установить пустое значение в input.

Это обработчик ввода в input:

methods: {
    handleUserName(value){
      this.userFormData.name = value
    }
  },

Тут пытаюсь присваивать в маунтед (не всегда успевает за 0.5с, надо 100% вариант):

mounted() {
    setTimeout(()=>{
     if(this.user){
      this.userFormData.name = this.$store.state.administration.user.name
      } 
    },500)

Так пытался получать из вычисляемого свойства (не давал менять его - все время сбрасывал):

computed: {
    userName(){
      if(this.user) return this.user.name
      else return
    }
}

Вот в шаблоне так сейчас:

<InputText
              :value="userFormData.name"
              :placeholder="'Введите имя'"
              :labelText="'Имя'"
              :type="'text'"
              @input="handleUserName($event)"
            ></InputText>

Тут запрос к API, который вызывается при вызове попапа:

getUsersEdit(context) {
      HTTP.post(Routes.getEditUserForm, {
        // 'id': userId
        'id': context.state.currentUserId
      })
        .then(({ data }) => {
          context.commit('getUser', data.user)
          console.log('data.user: ', data.user);
        })
        .catch(error => {
          console.error(error);
        })
    }

Comments

[alex]

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

Answer 1

[alex]

привязывайте модель инпута к vuex:

<InputText
  :value="userName"
  @input="handleUserName($event)">
</InputText>

computed: {
  userName: {
    get() {
      return this.$store.state.administration.user.name
    },
    set(value) {
      this.$store.commit('setUserName', value)
    }
  }
},
methods: {
  handleUserName(value){
    this.userName = value
  }
}

в этом случае, после открытие попапа, имя появится сразу после того, как данные придут с апи.

или вы можете открыть попап только посе того как данные придут с апи:

methods: {
  openPopup() {
    this.$store.dispatch('loadUser')
      .then(() => {
        this.popupOpen = true
      })
  }
}

Comments

[danilr]

Спасибо большое!) Первый вариант мне кажется удачнее. Единственное, что я пока не понимаю принцип работы set() в computed, читал документацию, но смутно понял как работает)

[alex]

danilr, это тоже самое что и обычные геттеры/сеттеры в js. если вкратце: set() вызовется когда мы выполним присваивание к свойству userName, get - когда чтение этого св-ва.

data() {
  return {
    bar: 5
  }
}
computed: {
  foo: {
    get() {
      return this.bar
    },
    set(value) {
      this.bar = value
    }
  }
}
...

console.log(this.foo) //чтение
console.log(this.bar) //5
this.foo = 7 //присваивание
console.log(this.foo) //7
console.log(this.bar) //7

[danilr]

Alex, наглядно, ещё раз спасибо)