Константин

let str = "abcdefg";
let newStr = "";
for (let i = 0; i < str.length; i++) {
  if ((i + 1) % 3 !== 0) {
    newStr += str[i];
  }
}
console.log(newStr);

Или:

let str = "abcdefg";
let newStr = [...str].filter((_, index) => (index + 1) % 3 !== 0).join("");
console.log(newStr);

Немного погуглив, решение нашлось на qna.habr и по ссылке https://www.tune-it.ru/web/leksa/blog/-/blogs/3044392 — хороший пример оформления. В целом (моё) решение выглядит следующим образом:

HTML

<div class="truncate-text">
<p>Тут какой-то текст длиной до 2000 символов, но нужно показывать до 200 символов. По событию onClick блок должен развернуться. А если блок развёрнутый - свернуться.
</p>
</div>

CSS

.truncate-text{
  height: 130px;
  overflow: hidden;
  position: relative;
}
.truncate-text.opener {
  height: auto;
}
.truncate-text:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(180deg, transparent, white 50%);
}
.truncate-text.opener:after {
  opacity: 0;
}

Javascript (jQuery)

<script>
    $('.truncate-text').click(function(){
        $('.truncate-text').toggleClass('opener');
    });
</script>

Можно ещё добавитьcursor: pointer; в стили, но как по мне - это лишнее. Если текст не завершённый, обычно человек тыкает на него пальцем интуитивно :)

breakpoints.scss:

$breakpoint_sm: 300px;
$breakpoint_md: 700px;
$breakpoint_xl: 1000px;

BestComponent.scss:

@import "breakpoints";

@media screen and (max-width: $breakpoint_md) {
  // ...
}

index.scss:

@import "fonts";
@import "breakpoints";

_app.tsx:

import { FC } from "react";
import { AppProps } from "next/app";
import "./styles/index.scss";

const App: FC<AppProps> = ({ Component, pageProps }) => (
  <Component {...pageProps} />
);

export default App;

Если Вы пишите "реактивные" приложения, то я бы рекомендовал уходить от классического css/scss к css-in-js, например используя emotion.js.

Но тут видите, мы все равно подключаем
Dmitrijs Balcers "breakpoints"; в BestComponent, а надо без импорта, сразу

В случае с SCSS переменными, они не могут быть доступны глобально без импорта, как это возможно с CSS переменными, которые определены в :root. Это ограничение SCSS и его способа компиляции в CSS.

Варианты:
- Использовать переменные :root:

:root {
  --breakpoint-sm: 300px;
  --breakpoint-md: 700px;
  --breakpoint-xl: 1000px;
}

@media screen and (max-width: var(--breakpoint-md)) {}

- Использовать sass-loader в webpack для автоматического импорта переменных в каждый файл:

{
  test: /\.scss$/,
  use: [
    "style-loader",
    "css-loader",
    {
      loader: "sass-loader",
      options: {
        additionalData: `@import "path/breakpoints.scss";`
      }
    }
  ]
}

- Использовать css-in-js и не изобретать велосипеды.

Потому что вы достаете стор из замыкания, а не из провайдера.

Создайте компонент, отрендерите его внутри Provider, оберните в inject('settingStore') и все заработает. Ну и исправьте опечатку с seting -> setting

Для краткости можно экспортировать так export default new SettingsStore()

Сначала <...> fetch() был прописан в methods

затем добавил <...> computed: - тогда ошибка появилась

Положите метод fetch где лежал.

Если Вы хотите получить places, то необходимо определить, что Вы хотите в результате увидеть (select()) и уточнить условия в зависимости от этого.

$places = Place::whereIn('places.id', $result)
                        ->where('places.active', '=', true)
                        ->Join('regions', 'places.region_id', '=', 'regions.id')
                        ->orderBy('places.rating')
                        ->select(['places.*'])
                        ->paginate(10);