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>

I don't see anything obviously wrong with this. Could it be that you have another instance of students-list somewhere else in your code, where you are not passing an array of students? — David Weldon
– David Weldon, Commented Jun 15, 2022 at 17:14
@shaaraa I added an answer. Did you get a chance to look into that ? I hope that will help you in understanding the use case and will work as per your requirement — Rohìt Jíndal
– Rohìt Jíndal, Commented Jun 16, 2022 at 5:52

Rohìt Jíndal · Accepted Answer · 2022-06-16 08:09:02Z

0

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>

edited Jun 16, 2022 at 8:09

answered Jun 15, 2022 at 17:23

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

shaaraa Over a year ago

HI Rohit, I have a custom component named studentlist, I want to use this component frequently and I want to pass a json trough that <studentlist data="[{json}]">.I don't want to give data in my component, I want my component to recieve data from that html tag.

Rohìt Jíndal Over a year ago

@shaaraa Yes you can do that like i did in the demo, instead of passing that from data property, you can directly pass that in HTML template.

Rohìt Jíndal Over a year ago

@shaaraa I improved my answer as per your comment. Hope it will work as per your expectation now.

Guido Faecke · Accepted Answer · 2022-06-15 15:49:15Z

0

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"

answered Jun 15, 2022 at 15:49

Guido Faecke

6841 gold badge5 silver badges7 bronze badges

4 Comments

shaaraa Over a year ago

but the problem is that I want to get that data from that custom component.

Guido Faecke Over a year ago

You probably will still get the data.

shaaraa Over a year ago

Sorry, I think I asked my question the wrong way,I want to pass that Array of data only through the <students-list> tag.

Guido Faecke Over a year ago

You probably will have no luck with that. The way you defined it, it will pass it on as a literal string.

Yi Feng Xie · Accepted Answer · 2025-01-17 11:10:39Z

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)
  }
}));

Collectives™ on Stack Overflow

How to get an Array data with custom Component in Vue

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related