Почему watcher не реактивен при создании компонента?

Question

[Comnox]

Использовал watcher для работы со строкой поиска и вывода отфильтрованного списка, все работает, но решил записывать значение строки поиска в localStorage и поле перезагрузки, значение подставляется в строку поиска, но watcher не срабатывает и отсутствует реактивность, пытался использовать immediate: true, но не помогло:

const seachCityName = ref(localStorage.getItem("seachNameFromLS") || ""); // беру значение из localStorage

сам watcher:

watch(
    seachCityName,
      () => {
        localStorage.setItem("seachNameFromLS", seachCityName.value); // записываю значение из localStorage
        // тут метод который фильтрует список по значению seachCityName из записывает в $store
    },
  { immediate: true }
);

Answer 1

[Aetae]

1. Всё работает:
2. Лучше писать так:

watch(
  seachCityName,
  (value) => {
    localStorage.setItem("seachNameFromLS", value); 
    // ...
  },
  { immediate: true }
);

3. Оборачивайте код в <code></code>, когда задаёте вопрос. Это нормы приличия.

Comments

[Comnox]

спасибо, буду знать

Answer 2

[Никита]

watch вообще не отрабатывает? А покажите кусок шаблона, где используете seachCityName

Comments

[Comnox]

все работает если вводить значения, но после перезагрузки значение из localStorage подставляется в input, но watcher не срабатывает и не фильтрует список, этот момент я хочу подправить, чтобы после перезагрузки и список фильтровался в зависимости от значения взятого из localStorage

<input
  type="search"
  v-model="seachCityName"
  @focus="inputFocused = true"
  @blur="inputFocused = false"
  :placeholder="placeholderText"
/>