0xD34F

не единственный

function Pokemon({ name, url }) {
  const [ data, setData ] = useState(null);

  useEffect(() => {
    fetch(url).then(r => r.json()).then(setData);
  }, [ url ]);

  return (
    <div>
      <h4>{name}</h4>
      {data
        ? <div>
            <ul>{data.abilities.map(n => <li>{n.ability.name}</li>)}</ul>
            <img src={data.sprites.front_default} />
          </div>
        : <div>loading...</div>
      }
    </div>
  );
}

const lines = data.split('\n').map(n => n.replace(/X\S+/, 'hello, world!!'));

Убирается. А потом из-за клика добавляется обратно.

Надо не тупо всем подряд false назначать, а только тем, по кому не было клика:

document.body.addEventListener('click', e => {
  document.querySelectorAll('details[open]').forEach(n => {
    n.open = n === e.target.parentNode;
  });
});

1:

index = next((i for i, n in enumerate(arr) if key in n), -1)

2:

value = next((n[key] for n in arr if key in n), None)

data: () => ({
  blockTypes: [ 'block-item1', 'block-item2' ],
  blocks: [],
}),

<button v-for="n in blockTypes" @click="blocks.push(n)">add {{ n }}</button>
<component v-for="n in blocks" :is="n"></component>

return this.arr.sort(...

Что делает метод sort:

Метод sort() на месте сортирует элементы массива

копия массива не создаётся

То есть, выполнили сортировку - потеряли исходное состояние массива.

Делайте внутри вычисляемого свойства копию массива, и сортируйте её. А когда нужны данные в неотсортированном виде, ничего не делайте, просто возвращайте массив, как он есть.

new_list = [ dict(zip(cols, n)) for n in old_list ]

methods: {
  trClass: rowData => rowData.is_blocked && 'table-danger',
  ...

<b-table
  :tbody-tr-class="trClass"
  ...

Кроме полных данных храните также и отфильтрованные. Их и отображайте. Значение фильтра пусть хранится в родителе - передавайте его в экземпляр компонента фильтра вместе с функцией, которая его (значение) будет обновлять. При обновлении значения фильтра обновляете массив отфильтрованных данных.

const Filter = ({ title, values, value, onChange }) => (
  <div>
    <h3>{title}</h3>
    {values.map(n => (
      <label>
        <input
          type="radio"
          onChange={() => onChange(n)}
          checked={value === n}
        />
        {n}
      </label>
    ))}
  </div>
);

state = {
  ...
  filteredProducts: [],
  status: 'all',
}

onFilterStatusChange = status => {
  this.setState({ status });
}

filterProducts() {
  this.setState(({ status }) => ({
    filteredProducts: status === 'all'
      ? this.state.products
      : this.state.products.filter(n => n.prod_status.includes(status)),
  }));
}

componentDidUpdate(prevProps, prevState) {
  if (this.state.status !== prevState.status) {
    this.filterProducts();
  }
}

render() {
  ...
    <Filter
      title="Status:"
      values={[ 'all', 'recommended', 'saleout', 'bestseller', 'new' ]}
      value={this.state.status}
      onChange={this.onFilterStatusChange}
    />
    <Products products={this.state.filteredProducts} />
  ...
}

Вместо <div className="status">{status}</div> пусть будет

{status.split(',').map(n => <div className="status">{n}</div>)}

Вместо вывода текущего результата в консоль возвращайте массив, состоящий из текущего результата и результатов рекурсивного вызова:

function getDividers(num, divider) {
  return num === 1
    ? []
    : num % divider
      ? getDividers(num, divider + 1)
      : [ divider, ...getDividers(num / divider, divider) ];
}

Ну а с полученным массивом можете делать что там вам надо:

function showDividers(num) {
  if (!Number.isInteger(num) || num < 2) {
    throw 'fuck off';
  }

  console.log(`${num} = ${getDividers(num, 2).join(' * ')}`);
}

setup() {
  ...
  const boards = computed(() => {
    return store.getters["boards/getBoards"];
  });

  return boards;
},

А если бы у вас было два вычисляемых свойства, что бы вы возвращали из setup? Вообще, что следует возвращать из setup? Откройте документацию и разберитесь.

function createTree({
  data,
  idKey = 'id',
  parentKey = 'parentId',
  childrenKey = 'children',
}) {
  const tree = Object.fromEntries(data.map(n => [ n[idKey], { ...n, [childrenKey]: [] } ]));
  return Object.values(tree).filter(n => !tree[n[parentKey]]?.[childrenKey].push(n));
}


const result = createTree({
  data: components,
  childrenKey: 'components',
});

все сделал по гайду

Это по какому? Ничего, что документацию вы смотрите к четвёртой версии роутера, в то время как используете третью?

data: () => ({
  numArticlesToShow: 5,
  ...
}),
computed: {
  articlesToShow() {
    return this.articles.slice(0, this.numArticlesToShow);
  },
  ...
},

<li v-for="n in articlesToShow">
  ...
</li>
...
<button @click="numArticlesToShow += 5" :disabled="numArticlesToShow >= articles.length">
  показать ещё
</button>

ul {
  counter-reset: item;
}

ul li {
  counter-increment: item;
}

ul li::marker {
  content: counter(item, lower-alpha) ") ";
}

this.$set(this.chartOptions.series[0].data, индекс, значение);

https://codesandbox.io/s/for-https-qna-habr-com-q-...

Пусть дефолтными номерами строк, на которых надо рисовать символы, будут не единицы, а случайные отрицательные значения. Т.е., drops[x] = 1; замените на, например

drops[x] = -Math.random() * canvas.height / font_size | 0;