[Vuejs]-Vue – passing a variable as a component prop

by

0👍

✅

Okay, so it seems that the Pomodoro component does not support reactive properties, so, while the timer will correctly be set to the initial value of number, it will not update if number changes. But – don’t worry – there’s an easy way around this: setting a key to the timer:

<Pomodoro :key="number" :minutes="number" />

A key tells Vue to update the component when the key has changed, so, in this case, whenever number changes, the Pomodoro element will be updated. More info on keys here.

Without a key:

without key

With a key:

with key

This is the full code:

<template>
  <div id="app">
    <b-field class="timer">
      <b-numberinput v-model="number"></b-numberinput>
    </b-field>
    <Pomodoro :key="number" :minutes="number" />
  </div>
</template>

<script>
import Pomodoro from "vuemodoro";

export default {
  name: "App",
  data() {
    return {
      number: 0,
    };
  },
  components: {
    Pomodoro,
  },
  // rest of the component
};
</script>

Also, you can try out this demo, and view/edit the code behind it

Leave a comment