Reactive props for a component

[Grafikart]

I noticed that component props are not reactive, is there a way to use a dynamic props for a component ?

  <div id="app">
    <div v-scope="{name: 'John'}">
      <input type="text" v-model="name">
      <p>
        Name: {{ name }}
      </p>
      <div v-scope="Counter({ initialCount: 1, prefix: name })"></div>
      <div v-scope="Counter({ initialCount: 1, prefix: 'Hello' + name })"></div>
    </div>
  </div>

  <template id="counter-template">
    My count is {{ count }},  Name: {{ prefix }}
    <button @click="inc">++</button>
  </template>

With the component defined this way

import { createApp } from "petite-vue";

function Counter(props) {
  return {
    $template: "#counter-template",
    count: props.initialCount,
    prefix: props.prefix,
    get double() {
      return this.count * 2;
    },
    inc() {
      this.count++;
    },
  };
}

createApp({
  Counter,
}).mount("#app");

Is it something that could work with petite vue ?

[jokagent]

Hi! You can provide a function as a prop value, so your example should look like

<div id="app">
  <div v-scope="{name: 'John'}">
    <input type="text" v-model="name">
    <p>
      Name: {{ name }}
    </p>
    <div v-scope="Counter({ initialCount: 1, prefix: () => name })"></div>
    <div v-scope="Counter({ initialCount: 1, prefix: () => 'Hello' + name })"></div>
  </div>
</div>

<template id="counter-template">
  My count is {{ count }},  Name: {{ prefix() }}
  <button @click="inc">++</button>
</template>

I assume this way has a performance drawbacks, but it's the only way that i found working. On the other side, this package is not designed to be used in creating big applications so this should not matter

[mythz]

You can provide a function as a prop value

Thanks! This should be in the docs, components are close to useless if they can't reactively update.

[Fry98]

I'm just gonna link my answer from another thread: #109 (comment)

In a nutshell, yes, the arrow function hack does work but as far as I know there isn't really a valid use-case for it. Parent scope's state is always accessible within the child scope so you don't need to pass it as a prop at all.