0xD34F

Не далее как позавчера, вы уже задавали подобный вопрос. Что такое - уже всё выветрилось из головы? Или для вас код - это не код, а набор заклинаний? Или вы просто не хотите ничему учится и намерены до седых волос бегать сюда за помощью?

Замените

var aNum = $('.answers .answer').length;

на

var aNum = $(this).closest('.answers').find('.answer').length;

Попробуйте отслеживать изменения user, т.е.:

export default {
  name: 'CustomButton',
  data: () => ({
    input_value: '',
  }),
  computed: {
    user() {
      return this.$store.state.user;
    },
  },
  watch: {
    user(val) {
      this.input_value = val.custombutton;
    },
  },
};

array_intersect(...$arrays)

preg_split('/[^\d]+/', $str)

Заменить:

- change_element.attr('data-animation-in', $(this).val())
+ change_element.data('animation-in', $(this).val())

Ну или наоборот:

- dropdown_container.data('animation-in')
+ dropdown_container.attr('data-animation-in')

Дело в том, что данные, которые привязываются к элементу с помощью метода data, они не в атрибутах хранятся, обращение к атрибутам выполняется только один раз:

data-* attributes are used to initialize jQuery data. An element's data-* attributes are retrieved the first time the data() method is invoked upon it, and then are no longer accessed or mutated (all values are stored internally by jQuery)

Так что или всегда работайте через data, или всегда через attr.

Все слишком громоздко, ступор.

А знаете почему? Причина номер раз - козлиные имена переменных, свойств объектов и т.д. Например, если у вас в группах содержатся проекты, то и назвали бы соответствующее свойство projects, а не arr. В проектах содержатся задачи - ну так пусть их список называется tasks, а не arr. А так у вас два разных arr - и ни про один сходу не скажешь, что это такое. Уже достаточно, чтобы запутаться.

Выбранные группа/проект - вместо индексов лучше хранить ссылку на сам объект, в случае проекта его же и передавать в компонент - так будет доступен список уже существующих задач и ваша проблема с их выводом решится сама собой.

При добавлении новых задач перетираете их список - зачем?

Немного подправил ваш код, типа вот. Похоже на то, к чему вы стремились?

.replace('/\s\s+/g', ' ')

Неправильно определяете регулярное выражение - кавычки не нужны.
Нет необходимости дублировать \s.
Есть иные способы помимо replace избавиться от повторяющихся пробелов.

document.querySelector('#text').addEventListener('input', e => {
  const value = e.target.value.trim();
  const output = document.querySelector('#output');

  output.textContent = value.replace(/\s+/g, ' ').length;
  // или
  output.innerText = value.split(/\s+/).join(' ').length;
  // или
  output.innerHTML = ''.concat(...(value.match(/\S+\s?/g) || [])).length;
});

Замените

$('.test').append('NEW BLOCK!');

на

$(this).closest('.test').append('NEW BLOCK!');

Вы берёте значение deleted из элементов массива productsList - естественно, одновременно разных значений быть не может. Надо, чтобы у каждого элемента history был свой deleted:

toggleRow(index) {
  this.setState(({ productsList, history }) => ({
    productsList: productsList.map((n, i) => i === index
      ? { ...n, deleted: !n.deleted }
      : n
    ),
    history: [
      ...history,
      {
        currentDateInfo: new Date().toLocaleDateString(),
        deleted: !productsList[index].deleted,
        index,
      },
    ],
  }));
}

<ul className="list-group">
  {this.state.history.map(n =>
    <li className="list-group-item">
      Row {n.index} {n.deleted ? 'deleted' : 'restored'} at {n.currentDateInfo}
    </li>
  )}
</ul>

document.querySelectorAll('tbody > tr').forEach(n => n.parentNode.prepend(n));

// или

const tbody = document.querySelector('tbody');
tbody.append(...Array.from(tbody.children).reverse());

// или

for (const n of [...document.querySelector('tbody').rows].reverse()) {
  n.parentNode.appendChild(n);
}

// или

const tbody = document.querySelector('tbody');
for (let i = tbody.rows.length; i--;) {
  tbody.insertAdjacentElement('beforeend', tbody.rows[i]);
}

Как я думал сделать:
По клику на deleteделать поля Name и Id visibility: none и в стейте сделать переменную isDeleted: true, если true то рендерить кнопку Restor'а, по клику на нее полям возвращать visibility.

Окей, делаем:

const ProductItem = ({ product, toggleRow }) => {
  return (
    <tr>
      <th>{product.deleted || product.id}</th>
      <td>{product.deleted || product.name}</td>
      <td>
        <button onClick={toggleRow}>
          {product.deleted ? 'Restore' : 'Delete'}
        </button>
      </td>
    </tr>
  );
};

class Products extends React.Component {
  state = {
    products: [ 'Apple', 'Peanut', 'Tomato', 'Cucumber', 'Banana', 'Lemon' ].map((n, i) => ({
      id: i + 1,
      name: n,
      deleted: false,
    })),
  }

  toggleRow(index) {
    this.setState(({ products }) => ({
      products: products.map((n, i) => i === index
        ? { ...n, deleted: !n.deleted }
        : n
      ),
    }));
  }

  render() {
    return (
      <table>
        <thead>
          <tr>
            <th>#</th>
            <th>Product Name</th>
            <th>Delete / Restore</th>
          </tr>
        </thead>
        <tbody>
          {this.state.products.map((n, i) => (
            <ProductItem
              key={n.id}
              product={n}
              toggleRow={() => this.toggleRow(i)}
            />
          ))}
        </tbody>
      </table>
    );
  }
}

Правда непонятно, при чём тут удаление? - данные-то на месте остаются, просто не отображаются.

Почему не работает - вам написали, синтаксическая ошибка.

Возьмите ваш action.title в кавычки, либо в квадратные скобки - в зависимости от того, что вам нужно. В первом случае именем свойства будет "action.title", во втором - значение action.title.

Кстати, а что нужно? Очевидно, второй вариант - значение action.title должно стать ключом, но что дальше? Ведь получится, что ключ и значение свойства вложенного объекта совпадают, а больше в этом вложенном объекте ничего и нет. Будет ли он дополняться в будущем чем-то ещё? Если нет, было бы логичнее складывать эти title'ы в массив вместо создания отдельного объекта под каждый. Если да, то в случае, если объект с указанным title'ом уже существует, его свойства будут потеряны. Так и задумано? Если нет, то их надо копировать:

return {
  ...state,
  [action.title]: {
    ...state[action.title],
    title: action.title,
  },
};

Как из этого массива, создать новый массив, и чтобы в нем были значения из массива user, что-то типа такого массива должно получиться res = [5,12,2,22,'5,23',cost,'5',numbers,1,5,33,count,props,4,area,7];

В смысле - хотите, чтобы все ключи и примитивные значения оказались развёрнуты в одномерный массив?

Рекурсия есть:

const getKeysAndPrimitives = val =>
  val instanceof Object
    ? [].concat(...(val instanceof Array
        ? val
        : Object.entries(val)
      ).map(getKeysAndPrimitives))
    : [ val ];

const result = getKeysAndPrimitives(user);

Рекурсии нет:

function* getKeysAndPrimitives(val) {
  for (const stack = [ val ]; stack.length;) {
    const n = stack.pop();
    if (Object(n) === n) {
      stack.push(...(Array.isArray(n)
        ? [...n]
        : Array.prototype.concat.call([], Object.entries(n))
      ).reverse());
    } else {
      yield n;
    }
  }
}

const result = [...getKeysAndPrimitives(user)];

Зажимайте.

UPD. Вынесено из комментариев:

Есть ли способ для снятия чекбоксов таким же способом, если делать по аналогии выходит коряво ?

вот аналогия и вот почему коряво
https://codepen.io/sasha1998dmitalex/pen/OZbyYo

Ну, тут разные варианты есть...

Можно выставлять чекбокс по левой кнопке, снимать по правой, типа так.

Можно инвертировать состояние чекбокса по событию mouseover, типа так.

Можно выставлять чекбоксы по зажатой кнопке мыши, а убирать по зажатой кнопке мыши + зажатой клавише ctrl, типа так.

Попробовала показать работу тут.

Выглядит очень печально. Ну, не работает ни хрена. Так что на этом этапе помочь вам будет весьма затруднительно - неясно, где себя проявляют проблемы, о которых вы говорите (говорите в целом ни о чём, поподробнее бы), а где косяки, допущенные вами при переносе кода в песочницу.

Из странных вещей, которые можно отметить сразу:

1. Использование даты в качестве key - что, не может быть двух событий в одну дату? Ну и пересоздание экземпляра компонента при каждом изменении даты - тоже как-то стрёмно выглядит.

2. Обновление данных (onDateInfo) - пишите присланные из компонента данные в какой-то непонятный объект, всегда один и тот же (а экземпляры компонента Date всё-таки разные). Это я вообще не понял, бред какой-то.

Немного поправил ваш код - по крайней мере, добавление/удаление заработало, и данные обновляются какие надо (если я правильно всё понял). Теперь можете начинать рассказывать, как воспроизвести ваши проблемы - что делать, куда смотреть.

Что делаю не так?

Пытаетесь подставлять значения посредством шаблонных строк вместо того, чтобы воспользоваться средствами форматирования, которые предоставляет pg-promise (точнее - смешиваете эти подходы).

Как правильно подставить параметры в запрос

Да как-то так, например:

db.query(`
  SELECT *
  FROM table
  WHERE id NOT IN ($(list:csv))
  LIMIT $(limit)
`, obj)

Про npm publish слышали?

Ну и примеры использования конкретно с vue - раз, два, три, ... тысячи их. В общем, погуглил за вас.

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

Подходит. Достаточно сразу после назначении обработчика сгенерировать событие самостоятельно - текст скопируется:

$('input').on('input', function() {
  $('p').text($(this).val());
}).trigger('input');

// или

const input = document.querySelector('input');
const p = document.querySelector('p');
input.addEventListener('input', e => p.textContent = e.target.value);
input.dispatchEvent(new Event('input'));

UPD. Вынесено из комментариев:

что делать, если параграф содержит текст по умолчанию, который должен отображаться пока в поле ввода не начали что-то вводить?

Проще говоря, когда инпут пустой, надо отображать текст параграфа.

Текст по умолчанию засунуть в data-атрибут: <p data-default-text="Текст по умолчанию"></p>.

Если инпут пустой, хватаем значение этого атрибута:

$('p').text($(this).val() || $('p').data('default-text'));

// или

p.textContent = e.target.value || p.dataset.defaultText