Intelix

Задать в кастомном свойстве ширину сайдбара

:root {
  --aside-width: 200px; /* По умолчанию */
}

.aside {
  width: var(--aside-width);
}

.main {
  margin-right: var(--aside-width);
}

В скрипте просто менять это свойство

document.documentElement.style.setProperty('--aside-width', '200px'); // show
document.documentElement.style.setProperty('--aside-width', '0'); // hide

Каким образом здесь утроена структура бд?

Произвольным. Здесь, похоже, вы видите результат какой-то выборки.

Какой тип имеют поля address, company?

String. А данные - либо array, либо stdClass, смотря как делали json_decode().

Как мне их записать в бд

Получить id нужных пользователей, затем сделать один insert для создания задачи и еще один insert для связывания задачи с пользователями.
Но при чем тут задачи и пользователи, если разговор идет про адреса и компании?

получать их в таком виде

Один запрос на задачу и один запрос на ее пользователей. На php сформировать массив в нужном формате.
Технически, запрос можно сделать один на все данные, но данные будут избыточны.

Знак доллара в конце паттерна уберите.

Преобразовать json в словарь, получить по ключу idMembers список, обойти его, на каждой итерации проверять вхождение элемента в userArray, сгенерировать новый список из найденных элементов, записать его обратно в словарь. Сделать можно как обычным циклом, так и списковым включением.

Сделайте два разных (реально, конечно, это будет один и тот же) input'а, которые будут переключаться с помощью v-if/v-else - один для показа форматированного значения, другой для редактирования:

<input v-if="edit" v-model="price" @blur="edit = false">
<input v-else :value="formatPrice(price)" @focus="edit = true">

data: () => ({
  edit: false,
  price: 666,
}),
methods: {
  formatPrice: price => `${(+price).toLocaleString()} руб.`,
},

https://jsfiddle.net/j6tf20cg/

UPD. Можно и одним обойтись, но без v-model.

Сделайте свои "аргументы" функциями, которые будут использоваться в качестве значений параметров метода filter, например:

data: () => ({
  items: [ ... ],
  filters: [
    item => item.status === 'hello, world!!',
    item => item.price > 666,
    item => item.text.includes('fuck the world'),
  ],
}),
computed: {
  filteredItems() {
    return this.filters.reduce((items, filterFn) => items.filter(filterFn), this.items);
  },
},

Таски "active" и "ready", вероятно, ничем не отличаются по структуре. Поэтому можно их отдавать с бэка единой кучкой. Добавить каждому флаг isDone (true / false).

Раскидать их по панелям дашборда можно уже на фронте.

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

Как реализовать это во Vue — решать вам. Можно прикрутить Vuex и разобраться с глобальным стейтом и мутациями. Можно просто держать массив всех тасков в общем корневом компоненте, в нём же фильтровать активные / готовые и раздавать в дочерние через пропсы. Как из дочерних менять состояние родителей — распространённый вопрос и есть несколько решений. Удачных поисков!

Если же состояние тасков меняется откуда-то ещё на бэке, т.е. инициатива изменений не в вашем фронте, а на бэке — придётся либо прикручивать сокеты, либо раз в секунду справшивать бэк «есть ли новости?», но это очень плохое решение. Лучше сокеты.

this внутри function зависит от контекста вызова этой function.
Когда срабатывает onAuthStateChanged - вызывается переданная ему функция-обработчик, которой устанавливается какой-то this(или не устанавливается, и тогда он по умолчанию window или, в строгом режиме, undefined). И этот this точно никак не связан с текущим this Vue, потому что тот никаким образом не передан при вызове, и, соответственно onAuthStateChanged о нём ничего не знает.

Используй:
a) (async function(user) { ... }).bind(this) чтобы жёстко привязать эту функцию к this.
b) vm.g = 5;, т.к. таким образом конкретный this сохранён в переменную и не меняется в зависимости от контекста вызова.
c) стрелочную функцию async (user) => { ... }, её механика работы по сути осуществляет неявный bind.
d) функцию обработчик в методах Vue: Vue автоматически делает bind всех методов к this:

onAuthStateChanged(this.onAuthStateChanged)
methods: {
  onAuthStateChanged: async function (user) { ... }
}

Можно так:

<a href="https://toster.ru" onclick="return false">link</a>

Или так:

a.disabled {
  pointer-events: none;
}

<a href="https://toster.ru" class="disabled">link</a>

t.close_date >= curdate()

Работает. Удалять только бывает нечего. С чего вы взяли, что позиции элементов и их id в массивах elementData и selectedElArr будут совпадать? Индекс надо не передавать в метод, а вычислять самостоятельно внутри:

methods: {
  toggleElement(id) {
    const index = this.selectedElArr.indexOf(id);
    if (index !== -1) {
      this.selectedElArr.splice(index, 1);
    } else {
      this.selectedElArr.push(id);
    }
  },
  ...

@click="toggleElement(data.id)"

Такие варианты есть:

1. Сделать компонент, который будет заниматься отображением данных только одного элемента массива, унести свойство show в этот компонент - у каждого экземпляра оно будет собственное, независимое от других.
   
2. Сделать свойство show массивом, хранить в нём id элементов, данные которых должны показываться.
   
3. Пусть элементы массива сами определяют, надо ли их содержимое демонстрировать - добавить свойство show каждому из них.
   

Это если данные в каждом из блоков должны отображаться независимо. Если же только в одном, тогда пусть свойство show содержит ссылку на соответствующий элемент массива или его индекс/id.

https://yandex.ru/search/?clid=1882628&text=vue+cl...
https://qna.habr.com/q/700194

<div class="lang-changer" @click="toggle = !toggle">
  <div :class="toggle ? 'lang-tog': 'lang'">
    <span :class="toggle ? 'a': 'b'">РУ</span>
    <span :class="toggle ? 'x': 'y'"></span>
  </div>
</div>

data(){
  return {
    toggle: false;
  }
}

Правда стили вложенных span по-хорошему лучше просто через css менять, относительно верхнего.

#1

const myval = '+1';
const arr = Object.keys(FList) // берем ключи из пар ключ-значение
.filter(key=>key===myval); // ... и фильтруем по совпадению с нашей переменной myval

for(let item of arr){
console.log(FList[item]) // вытаскиваем обьекты по ключам, полученным ранее
}

#2

const myval = '+1';
for(const [key,value] of Object.entries(FList)){
if(key===myval){
console.log(value)
}
}

Можно создать 2 цикла, первый:
'posts_per_page' => 4,
второй:
'offset' => 4,

То что вы пытаетесь написать:
if (question === 1||3)
Значит: "условие ИЛИ какое-то число, эквивалентно true". То есть 3 - это эквивалент true. Ноль будет эквивалентом false. Посмотрите, чему будут эквиваленту отрицательные числа, мне лень смотреть документацию или пробовать консоль.

В вашем случае, решение будет выглядеть так:
if (question === 1|| question === 3)
Если охота использовать перечисление в надежде сократить условие, то это может выглядеть так:
if ([1,3].indexOf(question) > -1)