@nslim13

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

Есть массив array, содержащий полсотни объектов примерно следующего вида:
{
  name: "name",
  val: 1,
  is_availible: function () { return this.val >= 10; }, //например так
  do_action: function () { console.log(this.name); },
}

Старое применение:
//обходим массив и для каждого элемента и выполняем:
if ( array[index].is_availible() ) {
  array[index].do_action();
}

Объекты описаны в отдельном файле для удобства дополнения и редактирование в виде:
[
  { name: __ , val: __ , is_availible: __, do_action: __ },
  ...
  { name: __ , val: __ , is_availible: __, do_action: __ }
]

Необходимо перенести эту структуру во Vue для отображения массива примерно в следующем виде:
<template v-for="item in array">
  <button v-if="item.is_availible()" @click="item.do_action()">{{item.name}}</button>
</template>

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы