How to update value of v-bind to prop?

Question

This is the parent page that I pass the data "time"&"breedKey" to child

<template>
        <MyChildComponent v-bind:breedKey="breedKey" v-bind:time="time"> </MyChildComponent>
</template>

<script>
        data() {
                return {
                  time:[]
                  breedKey:[]
                }
            },
<script>

This is the child page that I successfully get the value, but value is not updated when the value in parent is changed.

props: ["breedKey", "time"],

data() {
        return {
          thedate: this.time,
          topic: this.breedKey
        }

Answer 1

The data are only initialized with the props value.

You can directly reference to the props if you want to have reactivity.

 Vue.config.devtools = false; Vue.config.productionTip = false; const MyChildComponent = Vue.component('mychildcomponent', { template: '#mychildcomponent', props: ["breedKey", "time"] }) var app = new Vue({ el: '#app', components: { MyChildComponent }, data() { return { time: [], breedKey: [] } }, methods: { addTime() { this.time.push(Math.floor(Math.random() * 100)); }, addKey() { this.breedKey.push(Math.floor(Math.random() * 100)); } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script> <div id="app"> <div> <button @click="addTime">Add time</button> <button @click="addKey">Add key</button> <mychildcomponent v-bind:breed-key="breedKey" v-bind:time="time" /> </div> </div> <div> <div style="display:none"> <div id="mychildcomponent"> <div> time: {{ time }} breedKey: {{ breedKey }} </div> </div> </div>