[Vuejs]-Getting data from slot-scope

by

0👍

✅

It is not clear why you can’t access item but within your slot you should be able to access item. item is a property which is accessible via destructuring of the slotProps

<template v-slot:item-template="{ item }">
  <p>You can access item here</p>
</template>

To pass in item as a variable, you can add it to your slot component

  <slot
    name="item-template"
    :item="item"
  ></slot>

Regarding to your questions in the comments

This is just a basic example showing how to create a slot component and consume it.

This example slot component InputItem takes in a input field (slot) and emits an event when the value got updated

<template>
  <v-container>
    <slot name="field" :inputHandler="update"></slot>
  </v-container>
</template>

<script>
export default {
  props: {
    currentValue: {
      required: true
    }
  },
  methods: {
    update: function(newValue) {
      this.$emit("updated", newValue);
    }
  }
};
</script>

Your consuming component would be

<template>
  <v-container>
    <InputItem :currentValue="value" @updated="onUpdate">
      <template v-slot:field="{ inputHandler }">
        <v-text-field 
          :value="value" 
          @input="inputHandler"
        ></v-text-field>
      </template>
    </InputItem>
  </v-container>
</template>

<script>
import InputItem from "../../components/InputItem";

export default {
  components: {
    InputItem
  },
  data: function() {
    return {
      value: "not empty"
    };
  },
  methods: {
    onUpdate: function(newValue) {
      this.value = newValue;
    }
  }
};
</script>

The provided example HTML code uses Vuetify elements but I hope this is ok.

Leave a comment