从slot-scope获取数据

Question

<template slot="item-template" slot-scope="{ item }">
<div class="typeahead-value">{{ item.partnerName }} </div>
<div class="typeahead-info">
<b>Eori:</b> {{ item.partnerEori }} <br>
<b>Tara:</b> {{ item.countryName }}
</div>
</template>

Is there any way, i can get the value item.partnerName so i can put that value in a validation?Or any value

Answer 1

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.