Выполнение простых задач с помощью vue (Laravel) - PullRequest
Новая
       122

Выполнение простых задач с помощью vue (Laravel)

0 голосов
/ 30 мая 2020
• 1000 делая уроки, я создаю небольшое приложение для себя, просто чтобы убедиться, что я знаю, что делаю. Но я, кажется, действительно бьюсь с Vue.

Пока приложение очень простое. Пользователь публикует историю, у истории есть комментарии .... просто

Я дошел до того момента, когда я хотел, чтобы пользователь мог редактировать этот комментарий, но, похоже, я не могу понять, как это сделать сделай это. Я бы хотел, чтобы, когда пользователь нажимает кнопку редактирования, комментарий менялся на текстовое поле или какой-либо ввод.

На этом этапе я вообще не использовал vue в проекте. Все страницы отображаются с помощью лезвия.

Я пытаюсь понять, как вы собираетесь его использовать? Итак, у меня есть следующие вопросы:

  1. Вы собираетесь использовать несколько vue компонентов, L oop в лезвии и создавать их на каждой итерации? 

    <div id="app">
    @foreach($comments as $comment)
        <comment {Stuff passed in}></comment>
    @endforeach
</div>

  2. У вас должно быть одно vue «приложение», которое получает данные из API и l oop их в компоненте vue? 

        const comments = new Vue({
        el: '#comments#'
    })

  3. Поскольку весь сайт представляет собой многостраничное приложение (не хочу go по маршруту SPA), и, скажем, у меня теперь есть страница продуктов, у продукта есть список атрибутов (почти такой же, как комментарии) . Могу ли я создать другое приложение vue? 

    const comments = new Vue({
    el: '#comments',
});


const productThings = new Vue({
    el: '#productThings'
})

  4. Если я хочу создать разделы на странице, контролируемой vue (допустим, раздел комментариев и другой интерактивный раздел) Это должно быть 2 vue «приложений», как в приведенном выше примере кода, One это «комментарии» и «что-то еще», иначе вся страница должна состоять из одного большого vue компонента. 

    // Comment loop, How ever this gets handled with vue 
// Some other content 
// Another place I need it to be interactive````

Это кажется очень сложно просто для выполнения простых задач. Также кажется, что это выйдет из-под контроля очень быстро (я мог только представить, что вернусь к этому через 6 месяцев и попытаюсь понять, что происходит).

Вы вижу, как я запутался во всем этом. Чем больше я читаю, тем больше запутываюсь.

Ответы [ 2 ]

1 голос
/ 30 мая 2020
  1. Нет, обычно вы будете использовать компонент Vue для итерации и визуализации каждого комментария (возможно, как подкомпоненты).
  2. Вы можете получить данные из API или визуализировать его в ваш шаблон лезвия для Vue для использования (экономит вызов API и необходимость настраивать конечную точку API, если у вас ее еще нет).

  3. Если вы используете Vue строительные леса, предоставляемые Laravel, тогда экземпляр Vue инициализируется на любой странице, где загружено приложение. * Пакет js загружается и прикрепляется к элементу с идентификатором app, если он есть. Внутри этого элемента Vue будет анализировать любые директивы шаблона и отображать любые компоненты, которые были зарегистрированы. Таким образом, вы можете зарегистрировать дополнительные компоненты (например, ProductThings) для размещения в различных шаблонах лезвий.

  4. Как я уже упоминал выше, Laravel создает один Vue экземпляр. Нет ничего, что мешает вам рендерить содержимое stati c через blade-сервер в контейнер app, который Vue оставит как есть между компонентами, которые содержат независимые функции.

1 голос
/ 30 мая 2020

Vue используется для создания полноценных веб-приложений SPA, но может использоваться только в качестве дополнительного компонента без процесса сборки для более простых случаев использования. Обычно вы интегрируете Vue Router для создания многостраничного интерфейса, но вы также можете просто определить отдельные компоненты и смонтировать их на элементе. В вашем случае, со смешиванием PHP и Vue, я бы посоветовал пойти по пути без процесса сборки и добавляемых компонентов.

Vue - это структура JavaScript с stati c шаблонов. Таким образом, вам не следует генерировать шаблоны Dynami c и затем передавать их в Vue, а лучше определять шаблоны stati c, а затем передавать только данные в Vue. Вы можете, например, получить данные через Ajax в формате JSON, а затем обработать эти данные, например, чтобы отобразить список комментариев.

Если вы go для использования Vue в качестве вставки без маршрутизации вам необходимо смонтировать два отдельных экземпляра Vue на соответствующих страницах. Конечно, вы можете повторно использовать части этих компонентов. Имейте в виду, что вы не можете обмениваться данными между этими экземплярами (одно из преимуществ использования SPA). Однако вы можете поделиться данными через LocalStorage / SessionStorage / IndexedDB.

Один из распространенных способов доступа к данным - через REST API (через Ajax / fetch). Вы должны предоставить данные в правильном формате (обычно JSON) за интерфейсом HTTP REST. Затем Vue извлекает данные (см. Также ax ios для упрощения выборки данных) и затем использует их для создания компонентов. Другой подход (менее приятный) - просто визуализировать данные с помощью вашего серверного языка программирования и поместить их в переменную JavaScript, чтобы у вас был доступ к данным во время выполнения.

Вот basi c пример. Имейте в виду, что привязка значения из свойства является анти-шаблоном, и поэтому я не привязывал текст комментария двусторонним способом. Я также жестко запрограммировал данные комментария и не извлекаю их с пульта. 

Vue.config.devtools = false;
Vue.config.productionTip = false;

Vue.component('comment', {
  data () {
    return {
      commentAsInput: false
    };
  },
  props: {
    commentObject: {
      type: Object,
      required: true
    }
  },
  template: `<div>
    <a href="#" @click="commentAsInput = !commentAsInput" v-if="!commentAsInput">
      {{ commentObject.text }}
    </a>
    <textarea :value="commentObject.text" v-if="commentAsInput" />
  </div>`
});

Vue.component('comments', {
  data () {
    return {
      comments: [{ id: 124, text: 'fkgnsdklgnl' }, { id: 2135325, text: 'nlekng345gn' }]
    }
  },
  template: `<div>
    <h1>Comments</h1>
    <div v-for="comment in comments" :key="comment.id">
      <comment :comment-object="comment" />
    </div>
  </div>`
});

new Vue({
  el: '#app',
  template: `<comments />`
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>
...