How to use watch when array is inside an object?

Question

i have array inside object

    Vue.component('greeting', {
      template: '<button @click="cool">getdate! </button> ',
      data :function () {
        return {
          message:"15/10/1999",
        }
      },
      methods:{
        cool(){
          this.$parent.info.date.push(this.message);
        }
      }
    });
    
    
    var vm = new Vue({
      el: '#app',
      data:{
      name:"",
        info:{
          date:[]
        }
      }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
      <greeting></greeting>
      {{info.date}}
    </div>

I sent date from component it works fine but watch won't work.

how to use watch in this case in vuejs

Possible duplicate of [Vue.js - How to properly watch for nested data](https://stackoverflow.com/questions/42133894/vue-js-how-to-properly-watch-for-nested-data) — smac89, Dec 18 '18 at 23:37
after `this.$parent.info.date ="15/10/1999"`, date is not an array anymore, but a String. — Sirmyself, Dec 18 '18 at 23:37
Can you post the code that shows how you are watching this property — smac89, Dec 18 '18 at 23:38
do you want to push in that array or just assign message to `info.date`? — Boussadjra Brahim, Dec 19 '18 at 00:18
let assume i have name:"" in data above info how can i change it to name="jack" when date change and date is array inside info object — Mahdi Suissi, Dec 19 '18 at 01:05

score 0 · Accepted Answer · edited Jul 16 '22 at 05:48

0

The Vue way to do this is emit an event from your component to its parent. This honours Vue's one-way data-flow concept.

If you want to have some data property change when another does, I recommend using a computed property instead of a watch.

For example...

Vue.component('greeting', {
  template: '<button @click="cool">getdate!</button> ',
  data () {
    return {
      message: "15/10/1999"
    }
  },
  methods:{
    cool(){
      this.$emit('click', this.message)
    }
  }
});

new Vue({
  el: '#app',
  data:{
    info:{
      date: []
    }
  },
  methods: {
    addDate (date) {
      this.info.date.push(date)
    }
  },
  computed: {
    name () {
      return this.info.date.length ? 'Jack' : ''
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<div id="app">
  <greeting @click="addDate"></greeting>
  <pre>info = {{ info }}</pre>
  <pre>name = {{ name }}</pre>
</div>

edited Jul 16 '22 at 05:48

tony19

125,647
18
229
307

answered Dec 19 '18 at 00:30

Phil

157,677
23
242
245

hi phil for example i have name:"" above info in data how to change it to name="jack" when the info.date changed and date is an array – Mahdi Suissi Dec 19 '18 at 00:40
like this data:{ name:"", info:{ date: [] } – Mahdi Suissi Dec 19 '18 at 00:43
let assume i have name:"" in data above info how can i change it when date change and date is array inside info object – Mahdi Suissi Dec 19 '18 at 00:54
@MahdiSuissi I really have no idea what you mean. You should update your question. – Phil Dec 19 '18 at 01:04
@MahdiSuissi Also, if `date` should be an array, why are you assigning it a string? – Phil Dec 19 '18 at 01:05
i updated the the code , in data i added name i want name change into name="jack" when i pushed message inside info.date – Mahdi Suissi Dec 19 '18 at 01:18

How to use watch when array is inside an object?

1 Answers1