0xD34F

Используйте mounted вместо created:

mounted() {
  this.$refs.textArea.addEventListener(...

То, что значение i в момент выполнения document.getElementsByClassName("desc")[i] будет тем же, что и в момент выполнения acc[i].addEventListener есть ни на чём не основанная фантазия, не соответствующая реальности.

Вот если вы объявите i в заголовке цикла с помощью let - тогда да, работать будет.

Но вообще, создавать отдельные обработчики клика для каждой кнопки и обращаться по индексу к элементам .desc нет необходимости. Можно от кликнутой кнопки подняться до .tab-pane и там переключить класс, который изменит видимость .desc:

.active .desc {
  display: block;
}

const itemSelector = '.tab-pane';
const buttonSelector = `${itemSelector} .material_info`;
const activeClass = 'active';
const toggle = el => el.closest(itemSelector).classList.toggle(activeClass);


// слушаем клики на кнопках
document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => toggle(e.target));

// или, применяем делегирование - назначаем обработчик один раз общему предку кнопок,
// внутри проверяем, где случился клик
document.addEventListener('click', ({ target: t }) => {
  if (t = t.closest(buttonSelector)) {
    toggle(t);
  }
});

return abs(($a['value'] - $c_v) - ($b['value'] - $c_v)); // тут возможно бред - уже изменял 100000 раз и запутался

Да конечно бред.

Во-первых, вычислять надо не абсолютное значение разности разностей, а разность абсолютных значений разностей.

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

В общем, ваша сортировка могла бы выглядеть как-то так:

usort($arr, function($a, $b){
  $c_v = 2.6;
  return ceil(abs($a['value'] - $c_v) - abs($b['value'] - $c_v));
});

Получение случайного числа:

const random = (min, max) =>
  Math.floor(Math.random() * (max - min + 1)) + min;

Создание матрицы:

function createMatrix(rows, cols, min, max) {
  const matrix = [];

  for (let i = 0; i < rows; i++) {
    matrix.push([]);

    for (let j = 0; j < cols; j++) {
      matrix[i][j] = random(min, max);
    }
  }

  return matrix;
}

// или

const createMatrix = (rows, cols, min, max) =>
  Array.from({ length: rows }, () =>
    Array.from({ length: cols }, () =>
      random(min, max)
    )
  );

Вывод:

function outputMatrix(matrix, el) {
  const table = document.createElement('table');

  matrix.forEach(function(n) {
    const tr = this.insertRow();
    n.forEach(m => tr.insertCell().textContent = m);
  }, table.createTBody());

  el.appendChild(table);
}

// или

function outputMatrix(matrix, el) {
  el.insertAdjacentHTML('beforeend', `
    <table>
      <tbody>${matrix.map(n => `
        <tr>${n.map(m => `
          <td>${m}</td>`).join('')}
        </tr>`).join('')}
      </tbody>
    </table>
  `);
}

Как всем этим пользоваться:

outputMatrix(createMatrix(5, 5, 10, 30), document.body);

Так?

что-то мне подсказывает, что сам подход не верен

Ну в общем да, проблемка есть - унеся всю логику в computed (чего вообще делать не надо, т.к. computed для подобного не предназначены), затруднительно определить, какой из чекбоксов изменил последним своё состояние. Если выбран один чекбокс "секция №" и "все", что надо делать - снять первый или второй? Непонятно.

возможно вообще стоит разделить all и остальной список чекбоксов?

Да, так тоже можно.

Умножение на два - это сдвиг на один бит влево. Умножение на четыре - сдвиг на два бита. Ну и т.д. То есть, если числа полбайтовые, то умножать надо на шестнадцать. Первое число на шестнадцать в нулевой степени, второе на шестнадцать в первой степени, третье на шестнадцать во второй степени и т.д. Результаты умножения складываете, вот и всё.

moment.js:

moment(date).format('DD.MM.YYYY')

или

[
  `${date.getDate()}`.padStart(2, 0),
  `${date.getMonth() + 1}`.padStart(2, 0),
  date.getFullYear(),
].join('.')

или

date.toLocaleDateString('ru-RU')

Раз selected у вас массив - указывайте индекс, замените v-model="selected" на v-model="selected[i]".

Если вдруг напрягают null, которые vue подставляет для индексов без установленных значений, то массив можно заменить объектом.

Хочу научиться использовать последние стандарты (ES7, ES8), смотрел их разные фишки, хотелось бы попробовать, но как эти стандарты можно активировать?

Babel вам в помощь.

Видел фишки что то вроде "Точечный синтаксис"
Что-то вроде этого:
console.log ('Привет Мир!');
можно заменить на
c.l.'Привет Мир!'..

Это здесь? С первым апреля вас.

Вам тут не фильтр нужен, а computed свойство или метод.

a = [
  {:car=>["BMW", "Mersedes", "Audi"]},
  {:car=>["Renault", "Ferrari", "Nissan"]},
  {:car=>["VW"]},
  {:country=>["Russia", "Japan", "USA"]},
  {:country=>["China", "Nigeria", "Egypt"]},
  {:city=>["Moscow", "Tokyo", "Amsterdam"]}
]

b = a.group_by{|n| n.keys[0]}.map{|k, n| {k => n.map{|m| m[k]}}}

Очевидно же - у каждого item'а должно быть собственное свойство, отвечающее за отображение элемента:

$scope.items = [ 1, 2, 3, 4, 5, 6, 7, 8 ].map(n => ({
  value: n,
  show: false,
}));

<li ng-repeat="item in items">
  <a ng-click="item.show = !item.show">toggle</a>
  <div ng-show="item.show">
    hello, world!!
  </div>
  {{ item.value }}
</li>

Наверное, child изначально в model отсутствуют, да? Попробуйте

self.model.child = response.data.folders;

заменить на

self.$set(self.model, 'child', response.data.folders);

А что, по-вашему это нормально, что функция, использующаяся в качестве обработчика onmessage в основном потоке выполнения, определяется в файле воркера?

UPD. И ещё косяк:

new Worker("PrimeWorker.js");

А вот соответственно и код PrimeWork.js:

Так как всё-таки правильно - PrimeWorker или PrimeWork? Вы уж определитесь.

Функция продолжает работу после инструкции return true

Не-а, не продолжает. Это вам так кажется, из-за рекурсивного вызова. Кстати, его результат тоже надо возвращать, т.е. вместо просто

checkPalindrome(newStr);

должно быть

return checkPalindrome(newStr);

Ну и ещё проверки на пустую строку нет.

Можно использовать Vue.compile для компиляции шаблона, и определить собственную render-функцию, которая будет использовать результат компиляции. Как-то так.

Как-то у вас всё многословно и сильно переусложнено. Зачем целиком переопределять obj и несколько раз вызывать setState? - результат следующего вызова перетирает результат предыдущего, наверняка причина того, что ограничения координат не применяются, кроется где-то тут. Наверное, стоит создавать объект один раз, сразу с нужными значениями свойств, как-то так:

class App extends React.Component {
  state = {
    divStyle: {
      display: 'flex',
      alignItems: 'center',
      width: '1000px',
      height: '500px',
      outline: '1px solid red',
      position: 'relative',
    },
    move: {
      position: 'absolute',
      width: '200px',
      height: '100px',
      outline: '1px solid green',
      left: 100,
      top: 200,
    },
  }

  handlerMouseDown = e => {
    this.deltaX = e.pageX - this.ourdiv.offsetLeft;
    this.deltaY = e.pageY - this.ourdiv.offsetTop;
    window.addEventListener('mousemove', this.handlerMouseMove);
  }

  handlerMouseUp = e => {
    window.removeEventListener('mousemove', this.handlerMouseMove);
  }

  handlerMouseMove = ({ pageX }) => {
    this.setState(({ move }) => ({
      move: {
        ...move,
        left: Math.min(700, Math.max(100, pageX - this.deltaX)),
      },
    }));
  }

  render() {
    return (
      <div>
        <div style={this.state.divStyle}>
          <div
            ref={ourdiv => this.ourdiv = ourdiv}
            style={this.state.move}
            onMouseDown={this.handlerMouseDown}
            onMouseUp={this.handlerMouseUp}
          ></div>
        </div>
      </div>
    );
  }
}

https://github.com/SortableJS/Vue.Draggable

Есть даже демо для вашего случая.

Есть такая штука - nextTick. С ёё помощью можно вызвать функцию после обновления DOM-дерева. Т.е., делайте так:

this.stage = 1;
this.$nextTick(() => {
  const elem = document.querySelector('.elem');
  ...
});