Vue - passing a variable as a component prop

Question

I'm new to vue and I downloaded this Pomodoro timer component for my app (https://github.com/P3trur0/vuemodoro) which works well, except the time isn't adjustable inside the app itself.

Im trying to make an input field where the number of minutes will be entered and passed to the pomodoro timer, using the built in "minutes" property, but I don't understand how or if it's possible to pass variables to component properties in this way.

    '''
    
    <div>
        <b-field class="timer">
            <b-numberinput v-model="number"></b-numberinput>
        </b-field>
        <Pomodoro :minutes="1"/>
    </div>
    
    '''

Answer 1

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:

With a 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