CODEWITHSUNDEEP
javascriptvue.jsdata-bindingprop
Charlie
Charlie

Reputation: 71

How to update value of v-bind to prop?

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
        }

Upvotes: 1

Views: 1886

Answers (1)

Pierre Said
Pierre Said

Reputation: 3830

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/[email protected]/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>

Upvotes: 1

Related Questions