[Vuejs]-Vue can't recognize my component even though it seems fine to me. Error – Unknown custom element: <componentName>

by

1👍

✅

Vue.component() is a global registering method.

These components are globally registered. That means they can be used
in the template of any root Vue instance (new Vue) created after
registration.

Source: https://v2.vuejs.org/v2/guide/components-registration.html#Global-Registration

So, you have to register these components before the new Vue().

I changed the order of Vue.component() and new Vue(), and also added a locally registered component (ComponentA with PascalCase; also note that I added the closing tags in the HTML template):

Vue.component('catsy', {
  props: ['cats'],
  template: `<p>Hello this is cat: <ul><li v-for="cat in cats">{{cat.name}}</li></ul></p>`
})

const ComponentA = {
  props: ['innerList'],
  template: `<div><strong>Other component</strong><catsy :cats="innerList"></catsy>After the inner list.</div>`
}

new Vue({
  el: "#root",
  components: {
    'component-a': ComponentA
  },
  data: {
    cats: [{
      name: "kalduna",
      spasobni: 0
    }, {
      name: "zaxarich",
      spasobni: 1
    }, {
      name: "leqso",
      spasobni: 0
    }],
    newCat: "",
    spasobniValue: null,
  },
  methods: {
    addNewCat: function() {
      this.cats.push({
        name: this.newCat,
        spasobni: parseInt(this.spasobniValue)
      })
      console.log(this.spasobniValue)
    }
  },
  computed: {
    kaldunify: function() {
      if (this.newCat) {
        return this.newCat + " vis aswavli ubans she axvaro shena"
      }
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<div id="root">
  <h1 v-for="cat in cats" :class="{fancyClass : cat.spasobni}">
    {{cat.name }}
  </h1>
  <input v-model="newCat" @keyup.enter="addNewCat">
  <br>
  <label>Is he spasobni?<br>
<input type="radio" name="spasobni" v-model="spasobniValue" value="1">yass
<br>
<input type="radio" name="spasobni" v-model="spasobniValue" value="0">naay
</label>
  <br>
  <button @click="addNewCat">+ Add Cat</button>
  <catsy v-bind:cats="cats"></catsy>
  <component-a :inner-list="cats"></component-a>
</div>

I also added the prop in the catsy component.

👤muka.gergely

Leave a comment