laravel vue，在刀片模板中使用 vue 代码

Question

I'm trying to access vue component function data in a laravel blade that includes the component but I can't get it to work. Using this code, the site loads to a blank page, but if I remove the @ from the blade span, then the page loads with the autocomplete input and it doesn't access the data

autocomplete.blade.php

<autocomplete :items="items" v-model="item" :get-label="getLabel" :component-item='template' @update-items="updateItems">
</autocomplete>
<div>
    <span>@{{ item.name }}</span>
</div>

<div>
  <autocomplete-component></autocomplete-component>
</div>

autocomplete-component.vue

<script>
export default {
  props: {
    item: {required:true},
    searchText: {required:true}
  },
  data () {
        return {
            item: {id: 9, name: 'Lion', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'},
            items: [],
        }
  },
  methods: {
    getLabel (item) {
      return item.name
    },

  }
};
</script>

How can I make it so that the autocomplete div can exist in the blade but use the function and data in the included component?

Answer 1

To do this you need to use scoped slots .

In your autocomplete.vue you would need to insert a slot and the provide the slot with the item.

Roughly speaking -

Autocomplete:

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

// ...script etc

Blade view:

<autocomplete :items="items" v-model="item" :get-label="getLabel" :component-item='template' @update-items="updateItems">
    <template v-slot:default="slotProps">
        @{{ slotProps.item }}
    </template>

    // OR
    <template v-slot:default="{item}">
        @{{ item }}
    </template>
</autocomplete>