Composition API, get v-model of input in slot

[alebus84]

Hello,

Sorry for my bad English. I have a "Formx" component, which has a default "slot". And an "InputTextx" component, which is an "input". I pass "InputTextx" in the "slot" of "Formx". I would like to get in "Formx" the "v-model" of "InputTextx".

"Formx" :

<template>
  <form>
    <slot></slot>
  </form>
</template>

"InputTextx" :

<template>
  <div class="field">
    <input type="text" :placeholder="label" :id :name v-model="model" />
    <label :for="id">{{ label }} :</label>
  </div>
</template>

And use :

<section>
    <Cardx>
      <template #title>
        <Formx>
          <InputTextx name="toto"></InputTextx>
        </Formx>
      </template>
    </Cardx>
  </section>

Thank you in advance.

[Wei-Ba]

use privode/inject

[gitboyzcf]

You can use props to pass values and combine watchPostEffect in the form component to listen for ref, which can be obtained

demo https://play.vuejs.org/#eNqVU8Fu2zAM/RVBl7pAZmPrToFTYBsyoAO2Bt2OumQ27SqTJUGi0wBB/n2UZCdG2gbtTeR7Ih+ppz3/Ym2+7YHPeekrJy0yD9jbW6FlZ41DtmcOGnZgjTMduyLq1RH6blz3jbIJyouG4lDsxLjTtscpRQ6JgSZ0ZbQ/8R6o1SI0zK6FLoukiLRQgNBZtUagiLFybD2vTLcQfHJf8MggzrE51XvGKYsxTgWLoSJFZTHpxWccPYlsZJtvvNG0qH24IDh1tlKBu7coaQjB5ywiAVsrZZ5+xBy6HmZjvnqE6t8L+Y3fhZzgKwce3BYEP2K4di1ggpe/f8GOzkewM3WviH0BfABvVB80JtrXXtcke8KLau/ii0nd/vHLHYL241BBaGAeIl9wejna06ujn+Te5J/jPaEPtMXRHJec9rTG6nFlPC6bBiqcGf3T9BqhPvNfMo11xnqySw2N1LAKURZl0MvM7/9uqAK1JiMJfVY4y4hyzRa3SbZsslgrD9lhkNDCKMiVaU9g3vmW6qWZYuHLLq3ldjSjVwZZMXgt5c99Nv0b7/mPbFwIqRt+z8dPN1FeWs1yZ42HbE94UP1GxVEO234gF4Gi/0O3Bb84wuE/mcN4Pg==

The watchPostEffect document doesn't seem to have much introduction. This is about listening after DOM updates https://vuejs.org/api/reactivity-core.html#watchposteffect

[Hetari]

You can easily track the values, see here:

FormX.vue:

<script setup></script>

<template>
  <form>
    <slot></slot>
  </form>
</template>

InputTextx.vue:

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
  label: String,
  id: String,
  name: String,
  modelValue: String,
})

const model = ref(props.modelValue)

// Declare the emit event
const emit = defineEmits(['update:modelValue']);

// Watch for changes to emit the updated value
watch(model, (newValue) => {
  emit('update:modelValue', newValue);
});
</script>

<template>
  <div class="field">
    <input type="text" :placeholder="label" :id :name v-model="model" />
    <label :for="id">{{ label }}</label>
  </div>
  InputTextx Model val: {{ model }} 
</template>

App.vue:

<script setup>
import { ref } from 'vue'
import FormX from './FormX.vue';
import InputTextx from './InputTextx.vue';

const msg = ref('')
</script>

<template>
  <FormX>
      <InputTextx v-model="msg" name="toto"></InputTextx>
  </FormX>
  <br />
  App use Model val:  {{ msg }}
</template>