HTML:

There was an error: {{status.errorMessage}}

JavaScript: new CMSStartD1Connector({ el: document.getElementById("destiny-output"), config: CMSConfigObject.destinyOne, setup: ({vue, status, functions, course, sections}) => { // status, course and sections are vue refs and must be accessed with .value // Vue utilities are properties of vue (vue.ref, vue.reactive, etc) // Available vue utilities: ref, reactive, computed, onMounted, onUnmounted, watch, watchEffect, nextTick, onUpdated const exampleRef = vue.ref(null); const exampleReactive = vue.reactive({ prop1: 'value 1', prop2: 'value 2', }); // course and sections are null until the data is loaded console.log("course: ", course.value); console.log("sections: ", sections.value); // Watch for the 'ready' state to know they're loaded and the view is ready vue.watch(status, () => { if (status.state === 'ready') { console.log("loaded course: ", course.value); console.log("loaded sections: ", sections.value); // Override default page title functions.setPageTitle('My Page'); } }); // Access template refs after they've loaded vue.watch(exampleRef, () => { console.log("exampleRef.value: ", exampleRef.value) }); // Return anything you want to be available in the template as an object' // (Note: template refs must be returned in order to function) const x = 5; return { x, y: () => 'This is y', exampleRef, // Use computed properties to reformat data in course and sections delivery: vue.computed(() => { // Use functions that exist in the 'functions' object return functions.formatInstructionMethods(course.value.instructionMethods); }), // Use 'functions' object to add a section to the cart async addToCart (sectionId = 000000) { try { await functions.addSectionToCart(sectionId); } catch (error) { // Handle error here console.error("error: ", error.message); } }, } }, });