Andrey Vasilev

Всё возможно.
Например, так



Поддержка в целом неплохая https://caniuse.com/css-masks
Но если надо более надежно, то css-маску можно поменять на svg-маску

Только вот не для фронта эта задача.

const result = {};
const arr = [{ name: "cat" }, { name: "cat" }];

arr.forEach(function(item){
  if(result[item.name]) {
    result[item.name].count += 1;
  } else {
    result[item.name] = {...item, count: 1};
  }
})

console.log(result) // { cat: { name: 'cat', count: 2 } }
console.log(Object.values(result)) // [{ name: "cat", count: 2 }]
console.log(arr) // [{ name: "cat" }, { name: "cat" }];

<span v-once>{{ data }}</span>
При изменении data отображаться будет начальное значение.

Вместо computed сделайте обычное свойство компонента, при создании экземпляра копируйте значение из стора:

data() {
  return {
    value: this.$store.state.value,
  };
},

а если поменять местами строки?

$('a').removeClass('active');
$(this).addClass('active');

Добрый день, Андрей!
Начнем по порядку. При регистрации вам дают полный функционал на 2 недели. Если вы не продлили подписку, то все, что вы там использовали из платного функционала перестает работать. Например в хед впихнули скриптину - она поработает 2 недели, потом закоментится. Если за 6 месяцев не продляете подписку - сайт удаляется.
С платными блока почти тоже самое. Они будут отображаться на сайте. Но если у вас в платном блоке форма - заявки с нее приходить не будут.

Сайты на тильде индексируются точно также, как как и любые другие. Вообще никакой разницы не заметил. Только у меня сразу несколько вопросов к вам. Первый - чем вам поможет проиндексированная страница на домене 3-его уровня "qwerty.tilda.ws"?
И второй - надеюсь вы не додумаетесь продвигать сервисный домен тильды *.tilda.ws?)

Под окончание. Тильда, как платформа прогрессирует и это видно по повышению интереса к ней. Так что если задумали делать какой то проект на Тильде - смело реализовывайте. И по seo продвинуться сможете, и заявки получаться удобно, и доработки быстрее проходят.

Если появятся вопросы - пишите https://atrashkov.com

const data = [
 {
  id: 1,
  name: "краски"
 },
 {
  id: 1,
  name: "краски"
 },
 {
  id: 2,
  name: "краски"
 },
 {
  id: 1,
  name: "краски"
 },
]

Object.values(data.reduce((acc, item) => {
  const { id } = item
  if(!acc.hasOwnProperty(id)) acc[id] = { ...item, count: 1};
  else acc[id].count += 1
  return acc
}, {}))

Зачем верстать? Есть такой символ. ❞. Просто увеличь его font-size до 64pt;

Проверять тип свойства с ценой необходимости нет - пробуем достать новую цену, в случае отсутствия получим undefined, вместо которого с помощью nullish coalescing подставляем просто цену. А чтобы не копипастить извлечение цены, вынесем его в отдельную функцию, которую, как и сам сортируемый массив, можно сделать параметром функции сортировки.

const sorted = (arr, key) => arr
  .map(n => [ n, key(n) ])
  .sort((a, b) => a[1] - b[1])
  .map(n => n[0]);


const sortedArr = sorted(arr, n => -(n.price.new ?? n.price).replace(/\D/g, ''));

Я так понимаю надо какой-то фильтр применить для отображения?

Можно и фильтр:

filters: {
  numberOnly: val => /^\d+$/.test(val) ? val : '',
},

<div v-for="n in squares">
  {{ n | numberOnly }}
</div>

Но не обязательно:

<div v-for="n in squares">
  {{ Number.isNaN(+n) ? '' : n }}
</div>

Если знаете, в каких местах находятся нужные элементы, то

<div v-for="(n, i) in squares">
  {{ i % 11 ? '' : n }}
</div>

Или, если знаете сами элементы:

data: () => ({
  itemsToShow: [...Array(10)].map((n, i) => `${i + 1}`),
  ...
}),

<div v-for="n in squares">
  {{ itemsToShow.includes(n) ? n : '' }}
</div>

• Если только один элемент может изменить свой цвет, то добавляем в компонент свойство, которое будет содержать индекс такого элемента или его id или ещё что-то уникальное. В зависимости от его равенства этой уникальной характеристике элемента назначаем класс:
  
  

  data: () => ({
    active: null,
  }),

  
  

  <div class="item" v-for="i in 5">
    <div class="parent" @click="active = active === i ? null : i">
      <div class="child" :class="active === i ? 'green' : 'red'">{{ i }}</div>
    </div>
  </div>

  
  
• Если одновременно несколько элементов могут менять свой цвет, то надо хранить состояния каждого:
  
  

  data: () => ({
    items: Array(5).fill(false),
  }),

  
  

  <div class="item" v-for="(n, i) in items">
    <div class="parent" @click="$set(items, i, !n)">
      <div class="child" :class="{ green: n, red: !n }">{{ i + 1 }}</div>
    </div>
  </div>

  
  Или, можно сделать отдельный компонент для отображения одного элемента, который будет содержать в себе его состояние:
  
  

  props: [ 'text' ],
  data: () => ({
    active: 0,
  }),

  
  

  <div class="item">
    <div class="parent" @click="active ^= 1">
      <div class="child" :class="[ 'red', 'green' ][active]">{{ text }}</div>
    </div>
  </div>

  
  И создавать сколько надо экземпляров:
  
  

  data: () => ({
    items: Array.from({ length: 5 }, (_, i) => `item #${-~i}`),
  }),

  
  <v-item v-for="n in items" :text="n"></v-item>
  
  

Делаете ещё одно вычисляемое свойство - массив выбранных элементов. Геттер достаёт соответствующий массив из стора, сеттер вызывает мутацию. Используете это свойство в v-model чекбоксов. Вычисляемое свойство, управляющее выбором всех чекбоксов, переписываете следующим образом: в геттере сравниваете длины массивов всех элементов и выбранных, в сеттере устанавливаете значение вычисляемого свойства выбранных элементов. Например.

Привязать это к изменяемому классу, а не вот это вот все.

Не вижу смысла выделять city ни в ключ, ни в отдельный параметр. В чем смысл? Сделайте плоскую таблицу

this.cities1 = [
        { city: 'Москва', cityCode: 'moskva54', views: '53М', visites: '1,1M', isActive: true  },
        { city: 'Владимир', cityCode: 'vladimir', views: '23М', visites: '1,2M', isActive: false }
];

Либо вообще вместо массива объект:

this.cities1 = {
  'Москва': { city: 'Москва', cityCode: 'moskva54', views: '53М', visites: '1,1M', isActive: true  },
  'Владимир': { city: 'Владимир', cityCode: 'vladimir', views: '23М', visites: '1,2M', isActive: false }
};

В этом случае вы моментально получаете данные по городу или по нескольким, так как названия индексированы.. Если же вам нужен список, вы просто получаете Object.keys(this.cities1) или Object.values(this.cities1) если вместо со всеми данными

А один список без флексов и без js со свойствами column-fill: balance-all; и column-count: 3; не пойдет?