Почему не работают "двунаправленные вычисляемые свойства"?

Question

Есть такой компонент:(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, в отличии от дебаггера) не наблюдается. Ввод в поле инпута каких бы то ни было символов - также не дает никакой реакции - ни в дебаггере ни где бы то ни было еще.

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

Answer 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>

БЛОГ НА HUSL

Почему не работают "двунаправленные вычисляемые свойства"?

Ответы (1 шт):