I am using Vue js in my javascript code. I downloaded the vue-star-rating npm package to have a rating system for one of my elements. I believe I have followed the instructions here correctly, but I am getting the error
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link type="text/css" rel="../css/ProductEvaluation.css" />
</head>
<body>
<button class="btn btn-sm" id="btnRun">Run</button>
<div id="product-eval-areas">
<ul>
<li v-for="area in areas">
// Error is occurring on this custom element
<star-rating v-model="area.ProductEvaluationScore"></star-rating>
</li>
</ul>
</div>
<script src="https://url.com/WebResources/ccseq_/Scripts/jquery3.1.1.js"></script>
<script src="../../Scripts/papaparse.js"></script>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script src="../../Scripts/require.js" data-main="../js/main/ProductEvaluation.js"></script>
</body>
</html>
.js
"use strict";
requirejs.config({
bundles: {
'https://url.com/WebResources/ccseq_/WebResources/js/lib/CCSEQ.WebAPI.js': ['Model/ProductEvaluation', 'Model/ProductEvaluationArea', 'API/ProductEvaluation', 'API/ProductEvaluationArea']
//'../lib/CCSEQ.WebAPI.js': ['Model/ProductEvaluation', 'Model/ProductEvaluationArea', 'API/ProductEvaluation', 'API/ProductEvaluationArea']
}
});
require(["Model/ProductEvaluation", "Model/ProductEvaluationArea", "API/ProductEvaluation", "API/ProductEvaluationArea", "../../../node_modules/vue-star-rating/dist/star-rating.min"], function (ProductEvaluationModel, ProductEvaluationAreaModel, ProductEvaluationAPI, ProductEvaluationAreaAPI, StarRating) {
var currentProductEvaluation = new ProductEvaluationModel.ProductEvaluation();
Vue.component('star-rating', StarRating);
var areas = new Vue({
el: '#product-eval-areas',
data: { areas: currentProductEvaluation.ProductEvaluationAreas }
})
$(document).ready(function () {
PopulatePage();
});
function PopulatePage() {
$("#btnRun").click(function () {
var productEvaluationAPI = new ProductEvaluationAPI.ProductEvaluation();
productEvaluationAPI.Get(window.parent.Xrm.Page.data.entity.getId().replace(/({|})/g, "")).
then(
function (results) {
LoadProductEvaluation(results);
console.log("success");
}).catch(function (results) {
console.log("Fail");
});
});
}
function LoadProductEvaluation(productEvaluation) {
productEvaluation.ccseq_ccseq_productevaluation_ccseq_producteval.forEach(function (pe) {
var newProductEvaluationArea = new ProductEvaluationAreaModel.ProductEvaluationArea();
newProductEvaluationArea.EvaluationArea = pe.ccseq_evaluationarea;
newProductEvaluationArea.ProductEvaluationScore = pe.ccseq_productevaluationscore;
newProductEvaluationArea.SelfEvaluation = pe.ccseq_selfevaluation;
newProductEvaluationArea.ProductEvaluationID = pe.ccseq_productevaluationid;
currentProductEvaluation.ProductEvaluationAreas.push(newProductEvaluationArea);
});
}
});
via Tim Hutchison
No comments:
Post a Comment