How to get an Array data with custom Component in Vue

Question

I Pass an Array of data to a custom component in Vue js and want to have it in a that is defined in my template, but I get an error of Missing required prop: "students". here is my code.

custom Component:

customElements.define('students-list', defineCustomElement({
template: `<ul :classes="classes">
                <li v-for="st in students"
                    :key="st.name">
                    {{ st.name }}
                </li>
            </ul>
                </div>`,
props: {
    classes: {
        type: String,
        required: true,
    },
    students: {
        type: Array,
        required: true
    }

},
data() {
    return {
        
    }
}

}));

and the code I use to call it is:

<students-list classes="col-sm-12" :students = "[{name: 'John'},{name: 'Sarah'},{name: 'Dave'}]"></students-list>

Answer 1

Web Components only support attributes primitive String, Boolean, and Number. For reference, see Vue Web Component Prop documentation.

In your example, :prop="..." syntax is Vue-specific and doesn't apply to standard Web Components. Replace :students="..." with students="..." and manually parse the props.students string via JSON.parse to convert it into an object/array.

For Example

<my-web-component students='[{"name":"John","age":18},{"name":"Jane","age":20}]'></my-web-component>

customElements.define('students-list', defineCustomElement({
  props: {
    students: {
      type: String // change to String
    }
  },
  setup(props) {
    return {
      students: JSON.parse(props.students),
    };
  },
  mounted() {
    console.log("array", this.students)
  }
}));

Answer 2

As per your code, it seems you are trying to access the array of data from your parent component to child component which is <students-list>. If Yes, Here you go :

Vue.component('studentslist', {
  // declare the props
  props: ['students'],
  // just like data, the prop can be used inside templates
  // and is also made available in the vm as this.message
  template: `<div>
                     <ul>
                <li v-for="st in students"
                    :key="st.name">
                    {{ st.name }}
                </li>
            </ul>
                    </div>`
});

var app = new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <studentsList classes="col-sm-12" :students="[{name: 'John'},{name: 'Sarah'},{name: 'Dave'}]"></studentsList>
</div>

Answer 3

You could try to define a function in your methods like

students() {
  return [{name: 'John'},{name: 'Sarah'},{name: 'Dave'}];
},

and switch

:students = "[{name: 'John'},{name: 'Sarah'},{name: 'Dave'}]"

to

:students="students"