Vue - обновить значение данных, которые я передаю компоненту

#vue.js

Вопрос:

Я передаю переменную от родительского компонента к дочернему компоненту следующим образом:

родительский компонент

 <template>
  <div>
    <childComponent :lastPrice="lastPrice"></childComponent>
  </div>
</template>

<script>

export default {

  props:{

    lastPrice:{
      type:Number,
      default: 0
    }

  
  },

  mounted() {

    this.fetchLastPrice()
  },

  methods: {
    fetchLastPrice(){
      fetch('MY-API')
        .then(response => response.json())
        .then(data => {
          this.lastPrice = data['lastPrice']
      })
    }
  }

}

</script>

И тогда у меня есть дочерний компонент

 <template>
  <div>
    <h1>Last price: {{lastPrice}}</h1>
  </div>
</template>
     
<script>

export default {

  props:{

    lastPrice:{
      type:Number,
      default: '',
    }

  },

  mounted() {
    console.log('Mounted')
  },

  methods: {
    ...
  }
}

</script>

В родительском компоненте я определяю lastPrice и передаю его дочернему компоненту. Затем я изменяю значение lastPrice в родительском компоненте. Проблема с моим кодом заключается в том, что в дочернем компоненте значение lastPrice всегда 0 равно . Есть ли какой-нибудь способ, которым я могу сделать его реактивным? Я бы хотел избежать использования Vuex, так как это излишне для этой задачи, если это возможно. Заранее спасибо за любые советы

Ответ №1:

В вашем родительском компоненте вы определили lastPrice как props, поэтому вы не можете изменить его, чтобы передать его вашему дочернему компоненту.

Вот песочница с функциональным примером:

https://codesandbox.io/s/nice-faraday-50liu?file=/src/components/Parent.vue

Ответ №2:

В родительском компоненте вы определили prop вместо некоторых данных.

Попробуйте сделать это вместо этого в родительском компоненте:

 data() {
  return { lastPrice: 0 }
}