0xD34F

Имя атрибута, передаваемого в миксин, не обязано совпадать с именем атрибута, назначаемого элементу.

const data = $('.price')
  .filter((i, n) => +n.value)
  .closest('tr')
  .find('input[type="hidden"]')
  .get()
  .map(n => n.value);

или

const data = Array
  .from(document.querySelectorAll('.price'))
  .filter(n => +n.value)
  .map(n => n.closest('tr').querySelector('input[type="hidden"]').value);

или

const data = Array.prototype.reduce.call(
  document.getElementsByClassName('price'),
  (acc, { value: v, parentNode: { parentNode: tr } }) => (
    +v && acc.push(tr.cells[0].children[0].value),
    acc
  ),
  []
);

$num = 3.1415;

$sum = array_sum(array_slice(str_split(explode('.', $num)[1]), 2, 2));

если суммировать надо цифры, не являющиеся соседними, то

$num = 3.1415;

$idx = [ 1, 3, 5 ]; // индексы нужных цифр: 1 - это 4, 3 - это 5, 5 - этого уже нет, но ошибки не возникнет, будет использован 0

$digits = str_split(explode('.', $num)[1]);
$sum = array_reduce($idx, function($acc, $n) use($digits) {
  return $acc + (isset($digits[$n]) ? $digits[$n] : 0);
}, 0);

если есть вариант, что исходное число окажется целым, тогда в explode вместо $num передавайте $num.'.'.

Так? - второй параметр отвечает за длительность анимации.

UPD. Вынесено из комментариев:

а есть возможность, что бы анимация меню и ссылкок начиналась одновременно ?

Есть.

Вот настолько всё просто будет: showFirstHideLast('table', 'tr', 3);.

Ну, почти:

function showFirstHideLast(containerSelector, itemSelector, hideFrom) {
  $(containerSelector).each((_, n) => {
    $(itemSelector, n).show().slice(hideFrom).hide();
  });
}

или

function showFirstHideLast(containerSelector, itemSelector, hideFrom) {
  document.querySelectorAll(containerSelector).forEach(n => {
    n.querySelectorAll(itemSelector).forEach((m, i) => {
      m.hidden = i >= hideFrom;
      // или
      m.style.display = i < hideFrom ? '' : 'none';
      // или (в стили надо будет добавить .hidden { display: none; })
      m.classList.toggle('hidden', i >= hideFrom);
    });
  });
}

когда оба поля заполнены нулями, необходимо выводить всю таблицу

Ну так и добавьте соответствующее условие в метод фильтрации: (!min && !max).

echo str_pad($num, 6, '0', STR_PAD_LEFT);

function removeClasses({ classList: cl }, mask) {
  const reg = RegExp(`^${mask.replace(/\*/g, '\\S+')}`);
  cl.remove(...Array.prototype.filter.call(cl, n => reg.test(n)));
}

Не вижу, чтобы где-то происходило чтение данных из localStorage. Ну и какой-то малопонятный мусорный код ещё появился, newColumns - что это, зачем? В header.ondrop сохраняете:

localStorage.setItem('reorder', JSON.stringify(this.reorder));

В конструкторе получаете:

this.reorder = JSON.parse(localStorage.getItem('reorder')) || [];

https://jsfiddle.net/qd8Lab7f/

Делаете свойство active, которое будет ссылкой на выбранное изображение, начальное значение null. Выносите модальное окно за пределы v-for - достаточно и одного, знаете ли. В разметке окна меняете все i. на active.. Условие рендеринга окна станет v-if="active". Обработчик клика кнопки закрытия окна: @click="active = null". Обработчик клика на изображение внутри v-for: @click="active = i".

Данные по целям и составляющим их задачам сложить в массив:

data: () => ({
  goals: [
    {
      name: '...',
      tasks: [
        { name: '...', value: 0 },
        { name: '...', value: 0 },
        ...
      ],
    },
    ...
  ],
}),

Сделать метод, который на основании суммы задач будет определять, какие value доступны для выбора:

methods: {
  getValues(tasks, task) {
    const max = 100 - tasks.reduce((acc, n) => acc + n.value, -task.value);
    return [ 0, 10, 20, 30, 40, 50, 60 ].filter(n => n <= max);
  },
},

Отрендерить select'ы:

<tr v-for="g in goals">
  <td>{{ g.name }}</td>
  <td>
    <div v-for="t in g.tasks" class="task">
      {{ t.name }}
      <select v-model.number="t.value">
        <option v-for="v in getValues(g.tasks, t)" :value="v">{{ v }}</option>
      </select>
    </div>
  </td>
</tr>

https://jsfiddle.net/qmu1enhy/

в обычном html файле

В смысле - без использования систем сборки?

Ну, подключаете код и стили:

<script src="vue-date-pick-master/dist/vueDatePick.js"></script>
<link href="vue-date-pick-master/dist/vueDatePick.css" rel="stylesheet">

Всё, компонент будет доступен через переменную VueDatePick.

Дальше можете указывать его в components:

components: {
  VueDatePick,
},

Или зарегистрировать глобально:

Vue.component('date-pick', VueDatePick);

function setNested(root, ...args) {
  const val = args.pop();
  const key = (args = args
    .flat(Infinity)
    .flatMap(n => typeof n === 'string' ? n.split('.') : n))
    .pop();

  args.reduce((p, c) => p[c] = p[c] || {}, root)[key] = val;
}

const obj = {};
setNested(obj, 'xxx', 'yyy', 'zzz', 69);
setNested(obj, 'xxx.a.b.c', 187);
setNested(obj, [ [ [ '_' ], '?' ], '!' ], 666);

Не надо рендерить элемент, в который вы выводите data.capitalization, пока нет data: v-if="data".

Сортируем интервалы по возрастанию нижней границы. Перебираем интервалы и сохраняем текущий интервал в случае если ничего не сохранено (т.е., нулевой интервал сохраняется всегда) или если нижняя граница текущего интервала превышает верхнюю границу последнего сохранённого; в противном случае проверяем, что верхняя граница последнего сохранённого интервала ниже верхней границе текущего, если да - обновляем последний сохранённый - заменяем его верхнюю границу на верхнюю границу текущего.

function mergeIntervals(intervals) {
  intervals = intervals.map(n => [...n]);

  if (intervals.length < 2) {
    return intervals;
  }

  intervals.sort((a, b) => a[0] - b[0]);

  const stack = [];

  intervals.forEach(n => {
    const top = stack[stack.length - 1];

    if (!top || top[1] < n[0]) {
      stack.push(n);
    } else if (top[1] < n[1]) {
      top[1] = n[1];
    }
  });

  return stack;
}

each item in jsons.checks.checksData
  label.check__label
    input(type="checkbox").check__input
    | #{item.title}

$array = array_map(function($n) use($keys) {
  return array_combine($keys, $n);
}, $array);