Почему не скроллит к элементу?

rasschitai, как это исправить?

Почему не скроллит к элементу?

MSAFT,
Не получается. Делаю так. Компонент Comments, который через v-for крутит компонент Comment
В компонте Comment крутится компонент Comment (ответы на коммегт)

<div v-for="reply in comment.replies" :key="reply.id" :ref="'comment_'+reply.id">
<Comment>
</Comment>
</div>

здесь же в mounted компонента вызываю

var elementId = window.location.hash.replace('#', '')
        if(elementId) {
          console.log(elementId);
          this.$refs[elementId].scrollIntoView(true);
        }

в ссылке передаю прапвильный ид #comment_5616516
Пишет
Error in mounted hook: "TypeError: this.$refs[elementId].scrollIntoView is not a function"
Че ему надо?

Почему не скроллит к элементу?

MSAFT, добавил тег vue. Думал это чисто js вопрос. Как можно в моем случае ваш пример использовать? Т.е. я делаю :ref="'comment_'+reply.id" на элемент, в функцию передаю elementId и нужно теперь подставить в this.$refs.elementId.scrollIntoView(true);

Почему не скроллит к элементу?

MSAFT, верстку не могу выложить. В панели нахожу в коде нужный комментарий с правильныым ид вида
<div id="comment_51651"></div>
при неправильной верстке засыпало бы ошибками. Да и js писал бы что вместо элемента null. В vue dev tools также id элемента совпадает с каментом ну и впринципе все логи верные. Просто не скроллит

Почему не скроллит к элементу?

rasschitai, -439.13043478260875

Почему не скроллит к элементу?

MSAFT, он исполняется. в логе элемент успешно отрисовывается. Но скролить к нему не хочет.

Почему не скроллит к элементу?

rasschitai, с примером выше все равно скрола нет (передаю в функцию middle)

Почему не скроллит к элементу?

Насчет дом - элемент ведь нашел. Иначе была бы ошибка. Или как еще проверить?

Почему не скроллит к элементу?

Что должно быть в a1? Я в js плохо разбираюсь (не дальше типовых задач vue)

Почему не скроллит к элементу?

Я не писал, что код неправильный.

Как исключить из отправки формы пустые значения?

0xD34F, так правильно?

[...form.elements].forEach(n => !n.value && (n.disabled = true))

Как исключить из отправки формы пустые значения?

0xD34F, там с кнопкой submit, а у меня отправка после изменения поля

Как исключить из отправки формы пустые значения?

0xD34F, кажется я понял как работает данный метод. Он физически удаляет поля. Возможно ли как-то обойти этот момент? Чтобы при каждом запросе пустые поля не исчезали из формы, а то выглядит не очень.

Как исключить из отправки формы пустые значения?

0xD34F, спасибо! до такого варианта я бы сам точно не допер)

Как исключить из отправки формы пустые значения?

0xD34F, если так

<form :action="route" @submit="onSubmit">
  <div class="col-md-4 mb-3">
    <div class="col-xs-10">
     <input v-model="filter.name" type="text" class="form-control" name="name" onchange="this.form.submit()">
    </div>
  </div>
  <div class="col-md-4 mb-3">
    <div class="col-xs-10">
     <input v-model="filter.pages" type="text" class="form-control" name="pages" onchange="this.form.submit()">
    </div>
  </div>
</form>

----

onSubmit(e) {
  [...e.target.elements].forEach(n => !n.value && n.remove());
},

то все равно отправляет в урл пустые значения урл?name=asdasd&pages=

Как исключить из отправки формы пустые значения?

0xD34F, список элементов это названия полей или что? Как его передать? вот так @submit="onSubmit(this.filter)"
в урле без изменений с пустыми значениями. Если названия @submit="onSubmit({'name', 'pages'})" компонент отваливается

Как исключить из отправки формы пустые значения?

У меня не получится через foreach т.к. индвидуальная верстка для блоков (списки, инпуты, чекбоксы и т.д.). Также кнопки submit у меня нет т.к. форма отправлялась при каждом изменении поля с помощью onchange. Не могу понять как ваш код к себе встроить и адаптировать. Пробую так методом тыка)

<form :action="route" @submit="onSubmit">
  <div class="col-md-4 mb-3">
    <div class="col-xs-10">
     <input v-model="filter.name" type="text" class="form-control float-right" name="name" ref="name" onchange="this.form.submit()">
    </div>
  </div>
</form>

----

onSubmit() {
    Object.entries(this.filter).forEach(([ name ]) => !name && (this.$refs[name][0].disabled = true));
},

Как увеличить и затемнить картинку в card при наведении?

Ankhena, с этим разобрался, спасибо. А какой псевдоэлемент сделать, чтобы картинку затемнить в моем примере? Нагуглил список, но непонятно как это использовать и зачем)

Как увеличить и затемнить картинку в card при наведении?

Будет внутри, не будет пропадать.

Если будет внутри тогда вообще не появится

Как увеличить и затемнить картинку в card при наведении?

transform: scale(1.2); увеличивает картинку во все стороны. Из-за этого перекрывается текст снизу. На иви тоже текст под карточкой, но т.к. увеличение идет вверх, то текст не перекрывается.

Также в моем примере, в верхнем углу на карточке появляется иконка при наведении мыши (скрыта стилем hidden). Так вот если мышкой навести на иконку то эффект transform: scale пропадает.

Что касается затемнения.
Сделал

.card-img:hover {
  background-color: rgba(0,0,0,0.5);
}

Без изменений
https://jsfiddle.net/AlexMirand/aku3qorx/