Компоненты во Vue.js

@SerediM · Регистрация: 25.10.2021

Author24 — интернет-сервис помощи студентам

Всем привет! Такая задача: создать компонент корзину на vue.js. Не могу разобраться как же именно ее подключить как компонент?

вставляю в шаблон pug

Код

.cells
    .cell.cell-xl-8
      #app-cart(data-url="http://localhost:3000/products")
        app-cart
    .cell.cell-md-8.cell-lg-6.mx-auto.cart__form.cell-xl-4
        form.custom-form.collapsing-form(action="")

вот файл js, который инициализирует этот айдишник

Javascript

import {createApp} from "vue";
  import App from "./app-cart.vue";
  import store from "./vuex/store.js";
  
   let cartApp = document.querySelector("#app-cart");
 
   if (cartApp) {
     createApp(App, { props: ["data-url"] })
      .use(store)
      .mount("#app-cart");
   }

и вот мой компонент app-cart.vue

Javascript

app.component("cart", {
data() {
  return {
    URL: document.getElementById("app-cart").dataset.url
    }
  },
<template>
  <cart
  v-if="PRODUCTS.length"
  :URL="URL"
  :CONSTANTS="CONSTANTS"/>
  <cart-empty v-else/>
</template>
 
<script>
import cart from "./components/cart.vue"
import cartEmpty from "./components/cart-empty.vue"
import {mapActions, mapGetters} from "vuex"
export default {
  name: "app-cart",
  components: { cart, cartEmpty },
  computed: {
    ...mapGetters([
      "PRODUCTS",
      "CONSTANTS"
    ])
  },
  methods: {
  ...mapActions([
    "SET_PRODUCTS_TO_STATE",
    "DEACTIVATE_CART_STATUS",
    "DELETE_ALL_PRODUCTS_FROM_CART",
    "DEFINE_ENCODING",
    "SHOW_CART_FORM"
  ])
  },
   mounted() {
    this.SHOW_CART_FORM();
    this.SET_PRODUCTS_TO_STATE();
    this.DEFINE_ENCODING();
  }
}
</script>
});

по идее если я добавлю еще несколько app-cart внутри айдишника. то должно отобразиться несколько компонентов подряд, но так не работает. Мне кажется я неправильно подключаю компонент. Подскажите верное направление, не могу разобраться

	25.10.2021, 15:51