laravel vue, используя vue код в шаблоне блейда - PullRequest
0 голосов
/ 11 марта 2020

Я пытаюсь получить доступ к данным vue функции компонента в блейде laravel, который включает компонент, но я не могу заставить его работать. Используя этот код, сайт загружается на пустую страницу, но если я удаляю @ из диапазона блэйда, то страница загружается с вводом автозаполнения и не получает доступа к данным

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>

компонент автозаполнения. 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>

Как я могу сделать так, чтобы автодополнение div могло существовать в блейде, но использовать функцию и данные во включенном компоненте?

1 Ответ

0 голосов
/ 11 марта 2020

Для этого вам нужно использовать слоты с областями действия .

. В ваш autocomplete.vue вам нужно будет вставить слот и предоставить слот с предметом.

Грубо говоря -

Автозаполнение:

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

// ...script etc

Вид лезвия:

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...