- My journey with learning vue has just started, and I recently incorporated a prop into my vue component. At first glance, the code appeared to be correct, but then something unexpected occurred.
import Vue from 'vue';
import App from './App.vue';
import vSelect from 'vue-select';
import Paginate from 'vuejs-paginate';
import 'vue-select/dist/vue-select.css';
Vue.config.productionTip = false;
Vue.component('paginate', Paginate);
Vue.component('v-select', vSelect);
window.onload = function () {
var sections = document.getElementsByClassName("newsRoom");
let length = sections.length;
for (var i = length - 1; i >= 0; i--) {
sections[i].setAttribute("id", 'jsNewsListGridContainer' + i);
sections[i].setAttribute("ref", 'jsNewsListGridContainer' + i);
var parentElements = sections[i].parentElement;
var endpointurlhref = parentElements.dataset.endpoint;
var topic = parentElements.dataset.topic;
new Vue({
el: '#jsNewsListGridContainer' + i,
data () {
return {
endpointurl: endpointurlhref,
topic: topic
}
},
//pass the template to the root component
template: '<App :endpointurl="endpointurl" :topic="topic"/>',
components: { App },
})
}
}- This is the file
<template>
<div>
<ProjectsContainer :endpointurl="endpointurl" :topic="topic"/>
</div>
</template>
<script>
import ProjectsContainer from '@/components/ProjectsContainer';
export default {
name: 'App',
components: {
ProjectsContainer,
},
props: {
endpointurl: String,
topic: String
},
};
</script>3.
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<div id="jsnewslisting" class="initializeNewsList initializeNewsListContainer" ref="initializeNewsList"
data-label-sortby="sortby" data-label-results="results" data-label-no-result-found="no results found"
data-label-see-what-possible="see whats possible" data-label-try-to-change-filter="try to change filter"
data-endpoint="https://5fca1f2c3c1c220016441bd2.mockapi.io/projects/newsroom" data-topic="newsroom/topic/innovation">
<!--/* endpoint: data-endpoint + .getNewsList.html */-->
<!--/* Parameters: */-->
<!--/* page (current page in results),topic, type, sortBy */-->
<!--/* alwasy send the parameter "topic" example: endpoint?topic="newsroom/topic/innovation" */-->
<!--/* Muti-value params have their values separated by : */-->
<!--/* codes are better example type=news:case:testimonial */ -->
<div class="newsRoom"></div>
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<div id="jsnewslisting" class="initializeNewsList initializeNewsListContainer" ref="initializeNewsList"
data-label-sortby="sortby" data-label-results="results" data-label-no-result-found="no results found"
data-label-see-what-possible="see whats possible" data-label-try-to-change-filter="try to change filter"
data-endpoint="https://5fca1f2c3c1c220016441bd2.mockapi.io/projects/newsroom1" data-topic="newsroom/topics/inspiration">
<!--/* endpoint: data-endpoint + .getNewsList.html */-->
<!--/* Parameters: */-->
<!--/* page (current page in results),topic, type, sortBy */-->
<!--/* alwasy send the parameter "topic" example: endpoint?topic="newsroom/topic/inspiration" */-->
<!--/* Muti-value params have their values separated by : */-->
<!--/* codes are better example type=news:case:testimonial */ -->
<div class="newsRoom"></div>
</div>
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<div id="jsnewslisting" class="initializeNewsList initializeNewsListContainer" ref="initializeNewsList"
data-label-sortby="sortby" data-label-results="results" data-label-no-result-found="no results found"
data-label-see-what-possible="see whats possible" data-label-try-to-change-filter="try to change filter"
data-endpoint="https://5fca1f2c3c1c220016441bd2.mockapi.io/projects/newsroom2" data-topic="newsroom/topics/sustainability">
<!--/* endpoint: data-endpoint + .getNewsList.html */-->
<!--/* Parameters: */-->
<!--/* page (current page in results),topic, type, sortBy */-->
<!--/* alwasy send the parameter "topic" example: endpoint?topic="newsroom/topic/sustainability" */-->
<!--/* Muti-value params have their values separated by : */-->
<!--/* codes are better example type=news:case:testimonial */ -->
<div class="newsRoom"></div>
</div>
</div>
</div>With three components set to be created, I noticed during debugging that only one prop's data was properly seeded while the other two were not. Is there a way to create components without using new Vue() in main.js? I hope someone can help me out. Thank you!