Ответы пользователя по тегу Vue.js
  • Как правильно перенести логику объекта на Vue без data, methods и computed?

    @UnformedVoid
    Разработчик ПО
    Насколько я вижу логику построения структуры Vue-приложения, сделать такое нельзя. И вообще это неверный подход. Но есть воркэраунд. Можно написать функцию, которая будет мэппить ваши «плоские» js объекты в один большой Vue компонент. То есть нужно будет передать в data массив данных из полей name и val, а do_action и is_availible перенести в методы, хотя это, конечно же, нельзя считать красивым или изящным решением, так как придётся запихунть 50 методов с разными названиями в methods. Можно написать компонент, который будет отображать ваши объекты и программатически проинициализировать по экземпляру на каждый объект в массиве. Тоже не назвал бы самым красивым решением, но оно будет более изящным, хоть и более императивным, чем стоило бы быть приложению на Vue. Вы не сможете воспользоваться преимуществами темплейтинга Vue и скатитесь до JQuery подобного кода. Третий вариант — это сделать правильно, разбить данные и методы и собрать их так, чтоб можно было легко использовать с декларативным подходом Vue. Это будет самый гибкий и правильный подход. Я, если честно, не вижу практически никаких причин использовать однообразные объекты в той форме, которой делаете это вы. Зачем нужно хранить в каждом из них методы? Почему бы не вынести эти методы из объектов, ведь они должны работать на основе данных, которые у вас в name и val (или не так?). Неужели в них разная логика, в каждом из них? Если да, то вам стоит подумать о том, как правильно разделить эту логику и переиспользовать её, потому что ваш код выглядит однообразным, то есть ваши объекты, но судя по тому, как вы это делаете это не так, что может привести только к запутанному и сложноподдерживаемому коду.
    Ответ написан
  • Как лучше реализовать веб приложение на vue js?

    @UnformedVoid
    Разработчик ПО
    Суть компонентного подхода в следующем:
    1) Логика и представление отделяются друг от друга
    2) Функционал разделяется на слабозависимые и переиспользуемые компоненты
    3) Компоненты компонуются в различных комбинациях, реализуя готовое приложение

    Поэтому ответ на ваш вопрос следующий:
    1) Разбить всё на максимально простые (но не проще) переиспользуемые компоненты
    2) Объединить их в более крупные компоненты и самые крупные из них объеднить в корне приложения (файл в котором запускается корневой экземпляр Vue) в готовое приложение
    Ответ написан
    2 комментария
  • Какой вариант компонента объективно лучше?

    @UnformedVoid
    Разработчик ПО
    Аргументы вашего тимлида непрофессиональны и не подкреплены рациональной аргументацией. Ваш подход поддерживает компонентную структуру приложения. В то время как то, что предложил ваш тимлид обязывает слишком много помнить о том, как нужно писать код, увеличивает количество повторяющегося кода, в целом делает его более императивным, что плохо совместимо с идеями стоящими за Vue. В общем советую вам настоять на своём и описать почему ваш подход лучше. «я всегда так делал, мы так привыкли» — не аргумент. Ваш тимлид явно не видит абстрактную сторону и плохо понимает работу фреймворка, а может и как вы говорите, не очень-то и профессионален.

    UPD.
    Я исследовал комментарии тут, подумал и пришёл к дополнительным выводам, которые опишу тут:

    1) Ваш подход имеет минус — он избыточен, так как содержит два слота, что делает логику неясной. Дело в том, что у вас не понятно к чему относится второй слот content. Читающий может подумать, что это контент, который выводит сам аккордеон — один раз, а не для каждого элемента. Мне такая логика особо знакома из фрейморвка WPF. Там всё так и работает, но судя по вашему примеру этот слот относится к слоту item, то есть используется не для аккордеона, а для его элементов, что неправильно, так как нарушает инкапсуляцию. Это минус вашего подхода, но он легко исправляется.

    2) Минусы подхода вашего тимлида остаются теми же — многословность, императивность. Он нарушает принцип DRY.

    Так вот, требуется подход, который не будет нарушать лучших практик — гибридный подход. Для начала нужно разделить понятия аккордеона и элемента аккордеона — теперь это два слабосвязанных компонента. У нас должна быть возможность менять компонент элемент аккордеона на новый, при этом не трогая сам аккордеон. Это решается очень просто. Мы просто берём ваш подход и оставляем в нём только один слот item. Этот слот будет позволять пользователю аккордеона создавать разметку по своему усмотрению. Слот content убираем за ненадобностью. В дальнейшем мы можем аккордеону добавлять ещё слоты и они будут менять его структуру, например добавлять ему заголовок или что-то ещё, но при этом никак не трогая то, как отображается внутренность его элементов (помним об инкапсуляции)! Этим должен заниматься слот items. Теперь, у нас есть возможность создать разметку его элементов. Мы можем это сделать с помощью простых HTML тегов, если у нас аккордеон в одном месте и забыть о дальнейшем (помним о принципах YAGNI и KISS). Если же у нас аккордеон в нескольких местах, причём, разметка его элементов каждый раз одинаковая, то стоит задуматься о компоненте элемента аккордеона. Его структура не важна, так что ударяться в детали я не буду. Далее мы просто создаём ещё один компонент, который будет оборачивать наш аккордеон и подставлять в его слот item соответствующий компонент элемента аккордеона (и, возможно, добавлять ещё какую-то функциональность, разметку) — типа создаём подкласс. Таким образом мы не пишем v-for каждый раз, то есть не повторяемся (помним о DRY), и имеем полный контроль над тем, что происходит в приложении. Если понадобится что-то поменять у всех, мы просто зайдём и поменяем это в нашем последнем компоненте-обёртке. Если нужно будет реализовать что-то новое, то мы создадим новую обёртку или вовсе используем наш базовый аккордеон на нужной странице (помним о YAGNI). Некоторым может показаться это избыточным. Так и есть, этим надо пользоваться с умом. Если у вас один аккордеон на всё приложение, то и думать о переиспользовании — бессмысленно. Если же компонент требуется в нескольких местах, то приведённый мною подход прекрасно подойдёт, так как основан на лучших практиках взятых из ООП.

    P.S. С подходом-обёрткой мы можем даже не писать отдельные компоненты для элементов аккордеона, так как, в принципе, нам не нужны элементы аккордеона отдельно от него. Достаточно лишь создать аккордеон-потомок с нужной разметкой в слоте item.
    Ответ написан
    2 комментария
  • Как получить значение из массива в моем случае?

    @UnformedVoid
    Разработчик ПО
    Если я правильно понял задачу, то можно использовать обычный индексатор.

    {{userInfo[0]}}

    А лучше избавиться от массива, если возможно.

    UPD.
    Разобрался, всё до банальности просто. Там не массив, а строка, поэтому для начала вам нужно её спарсить. А дальше индексатором.

    https://jsfiddle.net/c1pnr8g3/
    Ответ написан