从槽范围获取数据

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>

有什么办法，我可以获得值 item.partnerName 以便我可以将该值放入验证中？或者任何值

Answer 1

尚不清楚为什么您无法访问 item，但在您的位置内您应该能够访问 item。 item 是一个属性，可以通过 slotProps

的解构访问

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

要将 item 作为变量传递，您可以将其添加到插槽组件中

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

关于评论中的问题

这只是一个基本示例，展示了如何创建插槽组件并使用它。

这个示例插槽组件InputItem接收一个输入字段（插槽）并在值更新时发出一个事件

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

您的消费组件将是

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

提供的示例 HTML 代码使用了 Vuetify 元素，但我希望这没问题。

从槽范围获取数据

Getting data from slot-scope

html

javascript

css

vue.js