Как использовать директиву V-Click-Outside?

Алексей Ярков, а как тогда быть на 3-й версии Vue? Тут описана у меня ситуация, как её решить на 3-м VUE?
Подскажите, пожалуйста. Уже 3-4 дня бодаюсь с этим, а оказалось все дело в версии...

Как использовать директиву V-Click-Outside?

Алексей Ярков, вот в этом и проблема... У меня vue 3... А я даже не догнал, что это для 2-ой версии Vue... Видимо не работает)

Как использовать директиву V-Click-Outside?

Алексей Ярков, в демке той даже окон никаких нет, я вообще не понимаю, что это за пример такой... Где там модальное окно?
Словно демка не соответствует назначению v-click-outside

Как использовать директиву V-Click-Outside?

Алексей Ярков, а нормальных учебных материалов по этой директиве нет

Как использовать директиву V-Click-Outside?

Алексей Ярков, мне непонятна демка от слова совсем. Я не вижу связи с моим случаем в этой демке, вообще

Как использовать директиву V-Click-Outside?

Алексей Ярков, сделал, как вы сказали, выглядит это так:

import { createApp } from "vue";
import { createPinia } from "pinia";
import vco from "v-click-outside";

import App from "./App.vue";
import router from "./router";

Vue.use(vco);
createApp(App).use(createPinia()).use(router).mount("#app");

Но почему-то не работает - просто белый фон на странице.
Если делаю так, то просто не работает, но страница отображается:

createApp(App).use(vco).use(createPinia()).use(router).mount("#app");

Как использовать директиву V-Click-Outside?

Вот в этом вопросе у меня ВЕСЬ код Как сделать закрытие меню по нажатию на любую область экрана?

И вот отдельный кусок выглядит так с использованием V-Click-Outside(под спойлером с названием: "вложенный в Header компонент HeaderBottom"):

<div
        v-bind:class="{ catalogOpen: boolean }"
        class="catalog"
        v-on:click="menu"
        v-show="show"
        v-click-outside="onClickOutside"
      >
        <div>
          <div />
          <div />
          <div />
        </div>

export default {
  data() {
    return {
      boolean: false,
      show: true,
    };
  },
  methods: {
    menu() {
      this.boolean = !this.boolean;
    },
    onClickOutside() {
      this.show = false;
    },
  },
};

Как использовать директиву V-Click-Outside?

Если вы про это npm install --save v-click-outside , то я это сделал

А взял я отсюда это, там больше ничего и нет про это https://webdevblog.ru/15-obyazatelnyh-direktiv-vue...

Почему localStorage работает только для 1-го или 2х элементов?

Aetae, и самое главное - правильно ли я понимаю, что подобные задачи на реальных проектах решаются иначе и бэкенд достается через axios(например) с удаленного сервера?
Тогда не возник бы ряд тех проблем, который возник у меня

Почему localStorage работает только для 1-го или 2х элементов?

Aetae, а как можно иначе изменять значение value?
У меня вообще впечатление, что я изначально эту задачу неправильно решаю и она решается куда проще и логичнее, чем нагромождать каждый объект собственным addPlus/addMinus

Почему localStorage работает только для 1-го или 2х элементов?

Aetae, да-да, id не уникальные, повторяются. Тогда все понял, извините)

Почему localStorage работает только для 1-го или 2х элементов?

И еще после очистки истории браузера ЛЮБОЙ товар(т.е. value в объекте) прекращает реагировать на addPlus

Почему localStorage работает только для 1-го или 2х элементов?

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

Почему localStorage работает только для 1-го или 2х элементов?

aLeXxX_03, то есть какой-то товар реагирует на нажатие кнопки вызывающей функцию addPlus, а какой-то не реагирует

Почему localStorage работает только для 1-го или 2х элементов?

Aetae, вот с этими объектами в массиве как-то все криво работает:

spoiler

<code lang="javascript">
{
    id: 1,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/juice_Ides.png",
    quantity: "В наличии 5 шт",
    name: "Хлеб Крестянский, 400г",
    price: "56",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Мука пшеничная хлебопекарная первого сорта, вода, мука ржаная хлебопекарная сеяная, сахар-песок, соль поваренная пищевая, солод ржаной, экстракт солодовый.",
  },
  {
    id: 2,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/bread.png",
    quantity: "В наличии 3 шт",
    name: "Белый хлеб, 400г",
    price: "59",
    currency: "руб",
    basket: "В корзину",
    descr: "Белый хлеб",
  },
  {
    id: 3,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/bread_belgor.png",
    quantity: "В наличии 3 шт",
    name: "Хлеб Белгородский, 400г",
    price: "49",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Мука пшеничная хлебопекарная первого сорта, вода питьевая, мука ржаная хлебопекарная обдирная, патока, соль, дрожжи хлебопекарные прессованные, улучшитель «Denfai» (мука пшеничная хлебопекарная высшего сорта, крахмал кукурузный, эмульгатор Е471, ферментные препараты).",
  },
  {
    id: 4,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/long__loaf.png",
    quantity: "В наличии 4 шт",
    name: "Батон, 400г",
    price: "119",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Батон приготовлен из пшеничной муки высшего сорта, дрожжей и подсолнечного масла. Классический батон в удобной нарезке. При изготовлении батона производитель не использует ни ускорители, ни хлебопекарные смеси.",
  },
  {
    id: 1,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/juice_Ides.png",
    quantity: "В наличии 5 шт",
    name: "Хлеб Крестянский, 400г",
    price: "56",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Мука пшеничная хлебопекарная первого сорта, вода, мука ржаная хлебопекарная сеяная, сахар-песок, соль поваренная пищевая, солод ржаной, экстракт солодовый.",
  },
  {
    id: 6,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/bread__bordin.png",
    quantity: "В наличии 3 шт",
    name: "Хлеб Бородинский, 400г",
    price: "79",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Ароматный, вкуснейший и очень домашний! Для всей семьи. Классический бородинский хлеб в духовке можно выпекать в форме или без нее. В обоих случаях он получается потрясающий. Испеките такой хлеб и поймете, что ничего лучше вы еще не пробовали!",
  },
  {
    id: 1,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/juice_Ides.png",
    quantity: "В наличии 5 шт",
    name: "Хлеб Крестянский, 400г",
    price: "56",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Мука пшеничная хлебопекарная первого сорта, вода, мука ржаная хлебопекарная сеяная, сахар-песок, соль поваренная пищевая, солод ржаной, экстракт солодовый.",
  },
  {
    id: 6,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/bread__bordin.png",
    quantity: "В наличии 3 шт",
    name: "Хлеб Бородинский, 400г",
    price: "79",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Ароматный, вкуснейший и очень домашний! Для всей семьи. Классический бородинский хлеб в духовке можно выпекать в форме или без нее. В обоих случаях он получается потрясающий. Испеките такой хлеб и поймете, что ничего лучше вы еще не пробовали!",
  },
  {
    id: 1,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/juice_Ides.png",
    quantity: "В наличии 5 шт",
    name: "Хлеб Крестянский, 400г",
    price: "56",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Мука пшеничная хлебопекарная первого сорта, вода, мука ржаная хлебопекарная сеяная, сахар-песок, соль поваренная пищевая, солод ржаной, экстракт солодовый.",
  },
  {
    id: 2,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/bread.png",
    quantity: "В наличии 3 шт",
    name: "Белый хлеб, 400г",
    price: "59",
    currency: "руб",
    basket: "В корзину",
    descr: "Белый хлеб",
  },
  {
    id: 3,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/bread_belgor.png",
    quantity: "В наличии 3 шт",
    name: "Хлеб Белгородский, 400г",
    price: "49",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Мука пшеничная хлебопекарная первого сорта, вода питьевая, мука ржаная хлебопекарная обдирная, патока, соль, дрожжи хлебопекарные прессованные, улучшитель «Denfai» (мука пшеничная хлебопекарная высшего сорта, крахмал кукурузный, эмульгатор Е471, ферментные препараты).",
  },
  {
    id: 4,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/long__loaf.png",
    quantity: "В наличии 5 шт",
    name: "Батон, 400г",
    price: "119",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Батон приготовлен из пшеничной муки высшего сорта, дрожжей и подсолнечного масла. Классический батон в удобной нарезке. При изготовлении батона производитель не использует ни ускорители, ни хлебопекарные смеси.",
  },
  {
    id: 4,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/long__loaf.png",
    quantity: "В наличии 5 шт",
    name: "Батон, 400г",
    price: "119",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Батон приготовлен из пшеничной муки высшего сорта, дрожжей и подсолнечного масла. Классический батон в удобной нарезке. При изготовлении батона производитель не использует ни ускорители, ни хлебопекарные смеси.",
  },
  {
    id: 1,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/juice_Ides.png",
    quantity: "В наличии 5 шт",
    name: "Хлеб Крестянский, 400г",
    price: "56",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Мука пшеничная хлебопекарная первого сорта, вода, мука ржаная хлебопекарная сеяная, сахар-песок, соль поваренная пищевая, солод ржаной, экстракт солодовый.",
  },
  {
    id: 6,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/bread__bordin.png",
    quantity: "В наличии 3 шт",
    name: "Хлеб Бородинский, 400г",
    price: "79",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Ароматный, вкуснейший и очень домашний! Для всей семьи. Классический бородинский хлеб в духовке можно выпекать в форме или без нее. В обоих случаях он получается потрясающий. Испеките такой хлеб и поймете, что ничего лучше вы еще не пробовали!",
  },
  {
    id: 3,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/bread.png",
    quantity: "В наличии 3 шт",
    name: "Белый хлеб, 400г",
    price: "59",
    currency: "руб",
    basket: "В корзину",
    descr: "Белый хлеб",
  },
  {
    id: 3,
    value: 0,
    addPlus(id) {
      this.value = this.value + 1;
    },
    addMinus(id) {
      if (this.value > 0) {
        this.value = this.value - 1;
      }
    },
    image: "../img/bread_belgor.png",
    quantity: "В наличии 3 шт",
    name: "Хлеб Белгородский, 400г",
    price: "49",
    currency: "руб",
    basket: "В корзину",
    descr:
      "Мука пшеничная хлебопекарная первого сорта, вода питьевая, мука ржаная хлебопекарная обдирная, патока, соль, дрожжи хлебопекарные прессованные, улучшитель «Denfai» (мука пшеничная хлебопекарная высшего сорта, крахмал кукурузный, эмульгатор Е471, ферментные препараты).",
  },
</code>

Почему localStorage работает только для 1-го или 2х элементов?

Aetae, Да, если всего 2 объекта в массиве, то не ломается, а если куча объектов разных(но однотипных), то начинается хрень...

Почему localStorage работает только для 1-го или 2х элементов?

Aetae, я создаю обычный каталог товаров с возможность выбрать n-е количество товара

Почему localStorage работает только для 1-го или 2х элементов?

Aetae, Проблема в том, что после очистки истории браузера или после добавления в реактивную переменную в которой массив объектов ЕЩЕ один объект, то все ломается.

Как заставить реагировать свойство для слежки watch на добавление в массив новых элементов?

Алексей Ярков, Я создаю счетчик нажатий на + и -.
Нажав на "+" - был выбран 1 товар.
Нажав еще раз - был выбран он же еще раз, т.е. теперь 2 товара.
Потом 3, 4 и т.д.

А локалСторедж здесь нужен для того, чтобы после перезагрузки страницы результат(выбранное кол-во товара) не сбрасывалось.

Как заставить реагировать свойство для слежки watch на добавление в массив новых элементов?

Алексей Ярков, и код там же