Как обновить значение v-bind для prop? - PullRequest
Новая
       109

Как обновить значение v-bind для prop?

0 голосов
/ 12 апреля 2020

Это родительская страница, на которую я передаю данные "время" и "breedKey" дочернему элементу 

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

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

Это дочерняя страница, на которой я успешно получаю значение, но значение не обновляется, когда значение в родительском изменено. 

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

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

1 Ответ

0 голосов
/ 12 апреля 2020

data инициализируются только значением пропа.

Вы можете напрямую обращаться к реквизиту, если хотите иметь реактивность. 

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