0xD34F

moment.js

Я так понимаю, это прямое продолжение вашего предыдущего вопроса. Директива, о которой я писал в своём ответе, в числе прочих настроек имеет такую, как infinite-scroll-distance. Она задаёт расстояние от нижней границы прокручиваемого элемента, на котором должен сработать коллбек. Просто указываете сколько вам надо.

Ставите себе vue-infinite-scroll, в обработчике запроса присваивание заменяете на push. В самом же запросе передавайте количество уже загруженных записей, ну а как в laravel применить limit и offset - смотрите в документации.

SELECT *
FROM `PVE` p
INNER JOIN `HEROES` h1 ON h1.heroes_id = p.heroes_id_one
INNER JOIN `HEROES` h2 ON h2.heroes_id = p.heroes_id_two
WHERE p.status != 'end'

Может кто-нибудь подсказать почему так происходит и как исправить?

Отвечать на вопрос "почему" особого смысла нет - ерундой какой-то занимаетесь, все эти дополнительные массивы, кто вас этим глупостям научил?

Как исправить - да выбросить всё лишнее на хрен, оставить один массив items, с ним и работать:

class AddItems extends React.Component {
  state = {
    value: '',
    items: [],
  }

  inputChange = ({ target: { value } }) => {
    this.setState({ value });
  }

  addNewItem = () => {
    if (this.state.value) {
      this.setState({
        items: [ ...this.state.items, {
          text: this.state.value,
          id: (new Date()).getTime().toString(),
        } ],
        value: '',
      });
    }
  }

  render() {
    return (
      <div className="addItems">
        <div className="addSection">
          <input type="text" value={this.state.value} onChange={this.inputChange} />
          <input type="submit" onClick={this.addNewItem} />
        </div>
        <div className="listSection">
          <ul>{this.state.items.map((item) => <li key={item.id}>{item.text}</li>)}</ul>
        </div>
      </div>
    )
  }
}

Запоминаете в массив все добавляемые элементы, при повторном добавлении выполняете для каждого map.controls.remove, как-то так.

Можно попробовать обшарить document.styleSheets:

const getClassStyles = className =>
  [...document.styleSheets].reduce((styles, { cssRules }) => {
    return [...cssRules]
      .filter(n => n.selectorText === `.${className}`)
      .reduce((styles, { cssText }) => {
        return (cssText
          .match(/[\w\-]+: [^;]+/g) || [])
          .map(n => n.split(': '))
          .reduce((styles, [ k, v ]) => (styles[k] = v, styles), styles);
      }, styles);
  }, {});


const styles = getClassStyles('class-name');

data: () => ({
  items: [
    { value:  69, title:  'hello, world!!', checked: false },
    { value: 187, title:  'fuck the world', checked: false },
    { value: 666, title: 'fuck everything', checked: false },
  ],
}),
computed: {
  sum() {
    return this.items.reduce((acc, n) => acc + n.value * n.checked, 0);
  },
  checkAll: {
    get() {
      return this.items.every(n => n.checked);
    },
    set(val) {
      this.items.forEach(n => n.checked = val);
    },
  },
},

<div>
  <label>
    <input type="checkbox" v-model="checkAll">
    CHECK ALL
  </label>
</div>

<div v-for="n in items">
  <label>
    <input type="checkbox" v-model="n.checked">
    {{ n.title }}
  </label>
</div>

<div>SUM: {{ sum }}</div>

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

Рекурсия. Если в элементе есть непустой массив children, то делаете рекурсивный вызов функции, передавая ей этот массив.

Можно напрямую создавать элементы:

const createTreeElement = data =>
  Array.isArray(data) && data.length
    ? data.reduce((ul, n) => {
        const li = document.createElement('li');
        const div = document.createElement('div');
        div.textContent = n.name;
        li.append(div, createTreeElement(n.children));
        ul.append(li);
        return ul;
      }, document.createElement('ul'))
    : '';


document.body.append(createTreeElement(data));

Или собрать соответствующую разметку:

const createTreeHTML = data =>
  data instanceof Array && data.length
    ? `<ul>${data.map(n => `
         <li>
           <div>${n.name}</div>
           ${createTreeHTML(n.children)}
         </li>`).join('')}
       </ul>`
    : '';


document.body.insertAdjacentHTML('beforeend', createTreeHTML(data));

Добавьте в LibraryContent:

componentDidUpdate(prevProps) {
  if (prevProps.url !== this.props.url) {
    this.getData();
  }
}

Так:

коллекцияМаркеров.events.add('click', function(e) {
  e.get('currentTarget').each(function(n) {
    n.options.set('preset', n === this ? 'islands#greenIcon' : 'islands#blueIcon');
  }, e.get('target'));
});

или

let activeMarker = null;

// ...

коллекцияМаркеров.events.add('click', function(e) {
  if (activeMarker) {
    activeMarker.options.set('preset', 'islands#blueIcon');
  }

  activeMarker = e.get('target');
  activeMarker.options.set('preset', 'islands#greenIcon');
});

??

const images = [
  {
    src: 'https://i.imgur.com/GigS3KR.png',
    translate: [ 50, 50, 500, 20 ],
    rotate: [ 340, 200 ],
    draw: [ 0, 0, 0.95 ],
  },
  {
    src: 'https://i.imgur.com/y3JAe69.png',
    translate: [ 5, 0, 382, 2 ],
    rotate: [ 630, 40 ],
    draw: [ 150, 100, 0.84 ],
  },
  {
    src: 'https://i.imgur.com/v30JIWp.png',
    translate: [ 8, 150, 198, 3 ],
    rotate: [ 500, 450 ],
    draw: [ 0, 0, 0.7 ],
  },
].map(n => {
  n.draw.unshift(new Image);
  n.draw[0].src = n.src;
  return n;
});

const canvases = document.querySelectorAll('.canvas');
const canvasSize = document.documentElement.clientWidth;

for (const n of canvases) {
  n.setAttribute('width', canvasSize);
  n.setAttribute('height', canvasSize);
}

let ts0;
window.requestAnimationFrame(function draw(ts) {
  for (const n of canvases) {
    ts0 = ts0 || ts;
    const dt = ts - ts0;

    const ctx = n.getContext('2d');
    ctx.clearRect(0, 0, canvasSize, canvasSize);

    for (const { translate: t, rotate: r, draw: d } of images) {
      ctx.save();
      ctx.translate(t[0], t[1] + Math.sin(dt / t[2]) / t[3]);
      ctx.rotate(Math.sin(dt / r[0]) / r[1]);
      ctx.drawImage(d[0], d[1], d[2], canvasSize * d[3], canvasSize * d[3]);
      ctx.restore();
    }
  }

  window.requestAnimationFrame(draw);
});

Это либо недоработка создателя компонента либо...

Наверное, всё-таки недоработка - глянул код компонента, там копии параметров кладутся в data, и изменения параметров не отслеживаются.

Что можно сделать, ну, кроме поиска более подходящего компонента? Как вариант - можно задать key, зависящий от значения records - тогда изменение последнего приведёт к созданию нового экземпляра компонента:

<pagination
  :key="records"
  ...

тег должен меняться,а не добавляться, как по дефолту сейчас

Вообще-то, "по дефолту" - это как раз то, что вам нужно. Внимательнее изучайте документацию.

Вообще-то, нет гарантии, что операция выполняется над числом. Это может быть что угодно. Собственно, потому тут и применяется побитовый оператор - чтобы гарантировать, что len будет целым числом. А почему применяется именно >>>, а не | или >> - число должно быть не только целым, но и положительным (или, если быть более точным, неотрицательным - 0 тоже окей).

Маркер из примера можно взять как он есть, а для определения положения использовать метод getCenter. Как-то так.

О каких радиокнопках идёт речь:

const radioSelector = '.radio_wrap input[type="radio"]';

Как, имея радиокнопку, можно получить содержимое её label'а:

const getLabel = el => document.querySelector(`[for="${el.id}"]`).textContent;
// или
const getLabel = el => el.nextElementSibling.innerText;
// или
const getLabel = el => el.labels[0].innerHTML;

Получаем, по событию change:

// назначаем обработчик события каждой радиокнопке индивидуально
document.querySelectorAll(radioSelector).forEach(function(n) {
  n.addEventListener('change', this);
}, e => console.log(getLabel(e.target)));

// или, можно сделать делегированный обработчик, где будет проверка, откуда пришло событие
document.addEventListener('change', ({ target: t }) => {
  if (t.matches(radioSelector)) {
    console.log(getLabel(t));
  }
});

computed: {
  foundItems() {
    return []
      .concat(...this.items.map(n => n.props || []))
      .filter(n => n.name.includes(this.search));
  },
},

<li v-for="item in foundItems">
  {{ item.name }}
</li>

https://jsfiddle.net/8qyrtsac/

Попробуйте заменить

'.catalog__scrollbarLine'

на

$(this).find('.catalog__scrollbarLine')

или

$(this).find('.catalog__scrollbarLine')[0]

Если вы внутри функции определяете переменную с таким же именем, как и у переменной из внешней области видимости, то последняя окажется недоступной. Строка 57 - уберите ключевое слово var.