0xD34F

SELECT table_name
FROM information_schema.columns
WHERE column_name = 'type_vendor'

const $headers = $('.bf-attr-group-header');
$headers.each(i => $headers
  .eq(i)
  .nextUntil($headers.get(i + 1))
  .wrapAll('<div class="wrapper">')
);

или

document.querySelectorAll('.bf-attr-group-header').forEach((n, i, a) => {
  const wrapper = document.createElement('div');
  const elems = [];
  for (let el = n; (el = el.nextElementSibling) && el !== a[i + 1]; elems.push(el)) ;
  wrapper.append(...elems);
  wrapper.classList.add('wrapper');
  n.after(wrapper);
});

<div style={{ ...styles.inputInit, backgroundColor: 'green' }}>

document.querySelectorAll('button').forEach(n => n.addEventListener('click', onClick));

function onClick() {
  const count = (+this.dataset.clickCount || 0) + 1;
  this.innerText = `clicked: ${count}`;
  this.dataset.clickCount = count;
}

$('span').text((i, text) => text[0] === '-' ? text : `+${text}`);

или

document.querySelectorAll('span').forEach(n => {
  n.innerText = n.innerText.replace(/^(?!-)/, '+');
});

или

for (const n of document.getElementsByTagName('span')) {
  n.textContent = '+'.slice(n.textContent[0] === '-') + n.textContent;
}

function getUrls($parts, $acc = '') {
  $urls = [];

  if (count($parts)) {
    $part = array_shift($parts);
    if (!is_array($part)) {
      $part = [ $part ];
    }

    foreach ($part as $p) {
      array_push($urls, ...getUrls($parts, ($acc ? $acc.'/' : '').$p));
    }
  } else {
    $urls[] = $acc;
  }

  return $urls;
}


$urls = getUrls($urlFragments);

function find(arr, id) {
  for (const { name, hobbies } of arr) {
    const { title } = hobbies.find(n => n.id === id) || {};
    if (title) {
      return { name, title };
    }
  }

  return null;
}


const data = find(arr, 4);

• Вариант раз.
  
  Добавить элементам массива mainCategories свойства, которые будут отвечать за состояния чекбоксов (по умолчанию имеют значения true); массив checkedCategories сделать вычисляемым:
  
  

  data: () => ({
    mainCategories: [
      { merchantId: '1', checked: true },
      { merchantId: '2', checked: true },
      ...
    ],
  }),
  computed: {
    checkedCategories() {
      return this.mainCategories.filter(n => n.checked).map(n => n.merchantId);
    },
  },

  
  

  <li v-for="n in mainCategories">
    <label>
      <input type="checkbox" v-model="n.checked">
      {{ n.merchantId }}
    </label>
  </li>

  
  
  
• Вариант два.
  
  При создании экземпляра компонента заполнить массив checkedCategories нужными значениями:
  
  

  created() {
    this.checkedCategories = this.mainCategories.map(n => n.merchantId);
  },

  
  
  

Для начала опишем элементы списка в виде массива объектов, где текст и процент будут отдельными свойствами:

data: () => ({
  items: [
    { name:      'PHOTOSHOP', val: 88, color:    'red' },
    { name:    'ILLUSTRATOR', val: 92, color:  'green' },
    { name:         'SKETCH', val: 90, color: 'orange' },
    { name: 'AFFTER EFFECTS', val: 98, color:   'blue' },
  ],
}),

Затем сделаем методы, который будут генерировать текст и стили для рисования линии (в качестве линии можно использовать границу элемента, border-bottom например) у элемента списка:

methods: {
  liText: item => `${item.name} ${item.val}%`,
  liStyle: item => ({
    'border-bottom': `3px solid ${item.color}`,
    width: `${item.val}%`,
  }),
},

И, наконец, отрендерим список:

<ul>
  <li
    v-for="n in items"
    v-text="liText(n)"
    :style="liStyle(n)"
  ></li>
</ul>

Делаем нормально: [...new Set(arr)].

И ненормально:

Object.values(arr.reduce((acc, n) => (acc[n] = n, acc), {}))

// или

Array.from(new Map(arr.map(n => [ n, n ])).values())

// или

arr.filter(function(n) {
  return !(this[n] = this.hasOwnProperty(n));
}, {})

// или

arr.filter(((picked, n) => !picked.set(n, picked.has(n)).get(n)).bind(null, new Map))

// или

arr.filter((n, i, a) => i === a.indexOf(n))

// или

arr.reduce((acc, n) => (acc.includes(n) || acc.push(n), acc), [])

https://jsfiddle.net/6eLg3a8v/1/

$('p select').change(function() {
  $(this)
    .parent()
    .find('.colors').hide()
    .end()
    .find(`.${this.value}`).show();
});

display: flex; для nav
flex-direction: column; (и ширину какую надо ещё не забудьте) для .navigation--blok

Так?

Метод openClick - кто вас такой мерзости научил? Срочно читаем документацию, как правильно работать с классами. Но вообще, чтобы скрывать/показывать элементы, переключать классы необходимости нет - под это дело предусмотрен специальный инструмент.

data: () => ({
  show: false,
  items: [ 'в сети', 'занят', 'отсутствую', 'в самолете', 'в пути' ],
  status: 'статус',
}),
methods: {
  selectStatus(status) {
    this.status = status;
    this.show = false;
  },
},

<div
  v-text="status"
  @click="show = !show"
></div>
<ul v-show="show">
  <li
    v-for="n in items"
    v-text="n"
    @click="selectStatus(n)"
  ></li>
</ul>

Передавайте в мутацию вместо просто состояния диалога объект вида { имя_диалога: состояние }. Тогда при обновлении состояния диалогов не будет необходимости обращаться к ним поимённо:

mutations: {
  dialogShow: (state, payload) => Object.assign(state.modals, payload),
},

В компоненте, вместо вычисляемого свойства modal, отвечающего за работу с одним диалогом, будет свойство modals, обеспечивающее получение состояния всех диалогов. А чтобы изменение состояния диалога по-прежнему выглядело как присваивание, воспользуемся Proxy, где будем перехватывать установку значений и вызывать мутацию:

modals() {
  return new Proxy(this.$store.state.modals, {
    set: (target, prop, value) => {
      this.$store.commit('dialogShow', { [prop]: value });
      return true;
    },
  });
},

Соответственно, в шаблоне заменяем установку значения просто свойства на установку значения свойства объекта:

<el-button @click="modals.dialogSignIn = true">sign in</el-button>

<el-dialog :visible="modals.dialogSignIn" @close="modals.dialogSignIn = false">
  <span slot="footer" class="dialog-footer">
    <el-button @click="modals.dialogSignIn = false">Закрыть</el-button>
  </span>
</el-dialog>

Посмотреть живьём.

По умолчанию задан padding-left для ul. 40 пикселей.

То есть если пользователь кликнул три раза по первой кнопке, то дочерний компонент значение "4" вывел только один раз.

А если кликнул по первой, потом по второй, а потом снова по первой? Что должно быть выведено в консоль? Если 4-2-4, тогда используйте ngOnChanges для вывода значений. Если 4-2-ничего - добавьте в дочерний компонент массив, куда будете складывать выводимые значения, и перед выводом проверяйте, есть ли там то, что собираетесь отправить в консоль.

В Network указывается не jpeg, а text/html

Путь неправильный. Или сервер файл не отдаёт. Вы бы посмотрели, что там в этом text/html - должно быть написано.

Ну и зачем тут requestAnimationFrame - я без понятия. Выглядит бредово. Есть же обработчик onload - в нём и рисуйте:

mounted() {
  const img = new Image();
  img.onload = () => this.$refs.canvas.getContext('2d').drawImage(img, 0, 0);
  img.src = '...';
},

https://jsfiddle.net/bd0ro2yL/

Работа с формами, это извините, основы. Читайте документацию.