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

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/