alex

const arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
console.log(arr) // [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]

const newArr = arr.splice(9, 6)
console.log(newArr) // [10,11,12,13,14,15]

github.com/webpack-contrib/mini-css-extract-plugin

>так в ней всегда лежит Значение 24

у вас код асинхронный, вы выводите переменную в консоль раньше, чем ее изменяете в коллбэке аксиоса. можно заюзать замыкание:

window.onscroll = (function(){
  var count = 24;
  
  return function() {
    var scrollTop=document.documentEle...
    ...
    ...
    ...
  }
})();

>почему такая запись не правильная?

правильная

Не работает, потому что в первом случае вы слушаете jquery-событие, а во втором - нативное событие, а jquery не может тригерить нативные события. чтобы второй вариант работал, событие нужно тригерить вот так:

document.dispatchEvent(new CustomEvent('af_complete;))

но т.к. судя по всему вы не можете изменить исходники modx, то остается использовать только первый вариант

проблема не во Vue. проблема (а это на самом деле не проблема) в особенностях рендеринга браузера. за ничтожно малый промежуток времени к элементу применяется два одинаковых патча стилей, поэтому он их в целях оптимизации не рендерит два раза, а рендерит сразу второе положение. изменить это поведение можно если насильно спровоцировать reflow/repaint между двумя патчами, сделать это можно, например, запросив для чтения какое-нибудь св-во, например ширины элемента. т.е. как-то так:

<Box v-for="(item, index) in subset"
  ...
  :ref="`ref${index}`">

Vue.nextTick( () => {
  this.$refs.ref2[0].$el.clientWidth;
  ...
});

https://jsfiddle.net/f4qao1xt/
https://jsfiddle.net/dyuct4x9/

addBtn.addEventListener('click', () => {
  const newCellName = tableRow.insertCell(0);
  const newCellValue = tableRow.insertCell(1);
  
  newCellName.appendChild(document.createTextNode(nameInput.value));
  newCellValue.appendChild(document.createTextNode(valueInput.value));
  
  nameInput.value = '';
  valueInput.value = '';
});

const formData = new FormData()
const reg = [{'ro': 123, 'ra': null, 're': 0}]


reg.forEach(obj => {
  Object.entries(obj).forEach(item => {
    formData.append(item[0], item[1])
  })
})

.wrapper div:not(:first-child) {
  margin-left: auto;
}

ну вы же запрашивали статью? вот id статьи сохраните и юзайте его при запросе комментов.

а вообще по-правильному, id статьи должен в url-строке быть
https://mysite.com/news/:id

и через методы роутера потом тяните этот id

methods: {
  getNewsComments() {
    const newsId = this.$route.params.id
    
    axios.get(`/news/${newsId}/comments`).then(...)
  }
}

посмотрите на вторую строчку в исходном html

function update(n = 0) {
  return function() {
    const el = document.querySelectorAll('ul > li')[n];
    
    el.style.color = 'blue'
  }
}

btn.onclick = update(2); // меняем цвет у 3-го элемента

document.getElementById("button_one")

у вас нет элемента с id="button_one"

document.querySelectorAll('h1')

возвращает группу элементов

function startQuest() {
  var startLink = document.querySelector('.button_one');
  startLink.onclick = function() {
    var title = document.querySelector('h1');
    title.style.display = 'none';
  }
}

1. Здесь (на тостере) прочитал, что задать фон (background) grid-ячейке (или набору ячеек) нельзя.

Задать фон нельзя элементу у которого указан display: grid; или дочерним элементам по отношению к элементу у которого указан display: grid;? Или в обоих случаях нельзя? И почему?

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

Правильно ли так делать?

правильно

И есть ли другие способы?

есть костыль с display:contents.
еще есть subgrid, но они пока working draft

var contactimg = $('.contact-pages img').attr('src', function(i, value) {
  if (!value) {
    return 'img/foto-none.jpg';
  }
});

$(document).on('click', '.btn-color', e => {
  $(e.currentTarget)
    .addClass('active')
    .siblings('.active')
    .removeClass('active')
})