0

Есть такой компонент:(inputTextApp)

<template>
  <input class="input_text_1" :placeholder="placeholder_text" :value="input_value"/>
</template>


<script>

  export default{

    props:['placeholder_text', 'input_value'],
  }

</script>



И его подключение в другой, более глобальный компонент:

<div class="input_wrap">

    <InputTextApp class="phone_number" placeholder_text="+49" v-model="message">
    </InputTextApp>

</div>

<script>
import InputTextApp from '~/components/FormElements/InputTextApp';

  export default{

  components:{
    InputTextApp,
  },

  computed: {

    message: {
      get () {
        return this.$store.state.tracker.trackingClientData.loading_cell_phone_number;
      },
      set (value) {
        this.$store.commit('tracker/setTrackingClientData_loading_cell_phone_number', value);
      }
    }

}

}
</script>



Vuex хранилище(tracker.js) для данной страницы выглядит следующим образом:

const axios = require("axios");

export const state = () => ({

trackingClientData: {
    "loading_cell_phone_number": "777777",
}

});

export const mutations = {

setTrackingClientData_loading_cell_phone_number (state, loadingCellPhoneNumber) {
    state.trackingClientData.loading_cell_phone_number = loadingCellPhoneNumber;
},

};


Вопрос:
В данной конструкции я пытался реализовать двунаправленное вычисляемое свойство, описанное в документации.

введите сюда описание изображения

Которое в моем случае почему то не работает. В Vue дебаггере можно увидеть следующую картину:

введите сюда описание изображения


В самом поле инпута никакого значения(777777, в отличии от дебаггера) не наблюдается. Ввод в поле инпута каких бы то ни было символов - также не дает никакой реакции - ни в дебаггере ни где бы то ни было еще.

Почему это происходит и что я упустил из виду?

2
  • 1
    v-model, по дефолту следит за полем value и подписывается на событие input. Ваш компонент inputTextApp - не имеет нужного поля и не эммитит нужное событие. Чтобы изменить поле и событие, на которые будет реагировать v-model, можно воспользоваться специальным функционалом ru.vuejs.org/v2/api/#model
    – Dmytro
    5 фев 2020 в 12:40
  • Не совсем понял по данной ссылке что прописать необходимо. Можите пример HTML кода инпута в компоненте и подключении показать в разрезе именно моей реализации? 5 фев 2020 в 12:43

1 ответ 1

1

Во Vuex я не зарывался. Тут же самое главное получить данные в родительском компоненте. Watcher только для того, чтобы показать изменения

const Wrapper = Vue.component("Wrapper", {
  props: ["input_value"],
  template: `<div>
  <input class="input_text_1" :value="input_value" @input="$emit('input',$event.target.value)"/>
  </div>`
});

new Vue({
  el: "#app",
  template: `<div>
  <Wrapper  v-model="message" :input_value="message"></Wrapper>
  </div>`,
  data() {
    return {
      message: "111"
    };
  },
  watch: {
    message: function(e){
      console.log(e)
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div id="app"></div>

2
  • Но это все таки получается совсем другой подход - чем тот который я на скрине в доке показывал - верно? В вашем примере добавлен атрибут @input - а в двунаправленных вычисляемых св-вах этого не демонстрируется + они и были нужны именно для того, как я понимаю что бы не прописывать все эти лишние сущности - или же я ошибаюсь? 5 фев 2020 в 13:11
  • 1
    в примерах, v-model используется на нативном тэге input, который автоматически генерирует события. Чего не делает Ваш компонент
    – Dmytro
    5 фев 2020 в 13:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.