I'm having trouble accessing data from a Vue component function in a Laravel blade template that includes the component. When I use this code, the page just loads as a blank page. However, if I remove the @ symbol from the blade span, the autocomplete input shows up on the page but 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>
Is there a way to have the autocomplete div in the blade template and still be able to utilize the function and data from the included component?