Despite of the amount of threads on the subject i can't figure out my mistake and why my 'props' stays undefined in my map-component.
Here is the root instance:
import Vue from "vue/dist/vue.esm.js";
import mapComponent from "./map-component.vue";
let vm = new Vue({
el: "#app",
template: `
<map-component> v-bind:feature-collection="featureCollection" </map-component>
`,
components: {
mapComponent
},
data: {
featureCollection: {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {},
geometry: {
type: "Polygon",
coordinates: [
[
[14.501953124999998, 46.619261036171515],
[21.884765625, 46.619261036171515],
[21.884765625, 48.922499263758255],
[14.501953124999998, 48.922499263758255],
[14.501953124999998, 46.619261036171515]
]
]
}
}
]
}
}
});
and my map-component:
<template>
<div id="map-placeholder">
<div ref="mapContainer" class="map-container"></div>
</div>
</template>
<script>
import L from "leaflet";
import "leaflet.markercluster";
export default {
name: "map-component",
data() {
return {
map: null,
markers: null,
tileLayer: null,
layers: null
};
},
props: [ "featureCollection" ],
methods: { ... },
mounted() {
this.initMap();
this.initLayer();
this.addLocationGeoJson("observation",this.featureCollection.features)
}
};
</script>
The script fails at this.addLocationGeoJson("observation",this.featureCollection.features) since featureCollection is undefined.
Full code available here.
Thank you for your help.
<map-component> v-bind:feature-collection="featureCollection" </map-component>
Check where your tags open and close.
It should be: <map-component v-bind:feature-collection="featureCollection">
Related
So I have a json file with this structure:
[
{
"id": 1,
"name": "name1",
"img": "pic1.jpg"
}
]
I am making a vue project where after I import it I'm trying to use as the img name in src for my image:
<div v-for="item in countries" :key="item.id">
<img :src="../src/assets/images/`item.img`" alt="">
</div>
But image doesn't appear, rest of the data is fine. How do I get the image?
Home.vue script
<script>
import { useDark, useToggle } from '#vueuse/core'
import jsonData from "../data/country.json"
export default {
name: "Home",
setup() {
const isDark = useDark();
const toggleDark = useToggle(isDark);
console.log(isDark.value);
return {
isDark,
toggleDark
}
},
data: function () {
return {
isSideOpen: false,
drawer: true,
isTheme: false,
listView: false,
show: false,
}
},
data() {
return {
countries: jsonData
}
},
}
</script>
Vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue(),
laravel({
input: [ 'resources/js/app.js'], //worls best without css
refresh: true,
}),
],
});
I have button which toggle data passed to this ChartComponent. If hold any seconds after toggle and retoggle so its work but if we doing it a bit fast, it is cause
Cannot read properties of null (reading 'getContext')? error.
<template>
<canvas></canvas>
</template>
<script>
import { defineComponent } from 'vue'
import Chart from 'chart.js/auto'
export default defineComponent({
name: 'ChartComponent',
props: {
type: {
type: String,
required: true,
},
data: {
type: Object,
required: true,
},
options: {
type: Object,
default: () => ({}),
},
},
data: () => ({
chart: null,
}),
watch: {
data: {
handler() {
this.chart.destroy()
this.renderChart()
},
deep: true,
},
},
mounted() {
this.renderChart()
},
methods: {
renderChart() {
this.chart = new Chart(this.$el, {
type: this.type,
data: this.data,
options: this.options,
})
},
},
})
</script>
You should unwrap/unproxy this.chart before accessing it by using Vue3 "toRaw" function:
import { toRaw } from "vue";
...
watch: {
data: {
handler() {
toRaw(this.chart).destroy()
this.renderChart()
},
I created a text editor component for my Vue3 project which is based on Quill (for documentation --> https://quilljs.com/docs/api/#setcontents):
<template>
<div class="form-control" v-bind:class="inputClasses" ref="editor"></div>
</template>
<script>
import Quill from 'quill';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.bubble.css';
import 'quill/dist/quill.snow.css';
import GENERAL_COMPONENT_CONSTANTS from "../constants/GeneralComponentConstants";
export default {
props: {
modelValue: { type: String, default: '' },
},
data() {
return {
editor: null
};
},
mounted() {
var _this = this;
this.editor = new Quill(this.$refs.editor, {
modules: {
toolbar: [
[{ header: [1, 2, 3, 4, false]} ],
["bold", "italic", "underline", "link", "image"],
],
},
//theme: 'bubble',
theme: "snow",
formats: ["bold", "underline", "header", "italic", "link"],
placeholder: this.placeholder,
});
this.editor.root.innerHTML = this.modelValue;
this.editor.setText('Default Value');
this.editor.on("text-change", function () {
return _this.update();
});
},
methods: {
update: function update() {
this.$emit(
"update:modelValue",
this.editor.getText() ? this.editor.root.innerHTML : ""
);
},
},
computed: {
}
}
</script>
It works fine and as a default value, I set the text this.editor.setText('Default Value'); But I am getting Uncaught DOMException: Failed to execute 'setStart' on 'Range': The offset 4294967294 is larger than the node's length error when I try to delete the whole default value.
I made a VueJS 3 project with VueX to store the data.
When I print the variable data.doughnutChart.data in the following code it displays
{ "labels": [ "OK", "WARNING", "ERROR" ], "datasets": [ {
"backgroundColor": [ "#d4efdf", "#fdebd0", "#fadbd8" ], "data": [ 3,
1, 2 ] } ] }
But the graph doesn't use these data [3,1,2], the graph uses the values of the initialization in the index.js of VueX.
Here my code :
<template>
{{data.doughnutChart.data}}
<div style="height:200px;width: 200px; position:center">
<vue3-chart-js
:id="data.doughnutChart.id"
:type="data.doughnutChart.type"
:data="data.doughnutChart.data"
:options="data.doughnutChart.options"
></vue3-chart-js>
</div>
</template>
<script>
import Vue3ChartJs from '#j-t-mcc/vue3-chartjs'
export default {
name: 'App',
components: {
Vue3ChartJs,
},
beforeMount() {
this.$store.dispatch("getData");
},
computed: {
data() {
return {
doughnutChart: {
id: 'doughnut',
type: 'doughnut',
data: {
labels: ['OK', 'WARNING', 'ERROR'],
datasets: [
{
backgroundColor: [
'#d4efdf',
'#fdebd0',
'#fadbd8'
],
data: [this.$store.state.nbOk, this.$store.state.nbWarning, this.$store.state.nbError]
}
]
},
options:
{
plugins: {
legend: {
display: false
},
title: {
display: true,
text: 'Current situation'
}
},
}
}
}
}
}
}
</script>
I read the value in my index.js (VueX) :
import axios from 'axios'
import { createStore } from 'vuex'
export default createStore({
state: {
data: [],
nbError : 0,
nbWarning : 0,
},
actions: {
getData({commit}){
axios.get('http://localhost:8080/data/mock.json')
.then(res => {
commit('SET_DATA', res.data)
})}
},
mutations: {
SET_DATA(state, data){
state.data = data.data;
state.nbWarning = 0;
state.nbError = 0;
for (let i = 0; i < state.data.length; i++) {
if(state.data[i].status == 'WARNING'){
state.nbWarning += 1;
};
if(state.data[i].status == 'ERROR'){
state.nbError += 1;
};
};
}
})
However it works when, in my Vuejs project, I go in an other page and come back but not when I just open the project or refresh the page.
Do you know why ?
data property should be defined as computed in order to receive store changes:
<template>
{{data}}
</template>
<script>
export default {
data() {
return {
}
},
computed:{
data(){
return [this.$store.state.nbWarning, this.$store.state.nbError]
}
},
beforeMount() {
this.$store.dispatch("getData");
}
}
</script>
My chart Will not render I tried using query selector and refs. It is not throwing any errors just not rendering to the DOM.
The Template
The Function
createChart() {
let article = this.$el.querySelector(".highchart");
//let article = this.$refs.highchart;
HighCharts.chart(article, {
series: [
{
type: "treemap",
layoutAlgorithm: "squarified",
data: this.chartData
}
],
colorAxis: {
minColor: "#F98C32",
maxColor: "#F04E23"
},
title: {
text: `Total Items ${this.totalCount}`
}
});
}
Called in Mounted
mounted() {
this.createChart();
}
Have you considered using highcharts-vue official wrapper which is recommended? It can be downloaded here: https://github.com/highcharts/highcharts-vue. Check the code and demo posted below.
main.js:
import Vue from "vue";
import App from "./App";
import HighchartsVue from "highcharts-vue";
Vue.config.productionTip = false;
Vue.use(HighchartsVue);
/* eslint-disable no-new */
new Vue({
el: "#app",
components: { App },
template: "<App/>"
});
App.vue:
<template>
<div id="app"><highcharts /> <btn /></div>
</template>
<script>
import Chart from "./components/Chart";
import Button from "./components/Button";
export default {
name: "App",
components: {
highcharts: Chart,
btn: Button
}
};
</script>
Chart.vue:
<template>
<div>
<highcharts
:options="chartOptions"
ref="lineCharts"
:constructor-type="stockChart"
></highcharts>
</div>
</template>
<script>
import { Chart } from "highcharts-vue";
import Highcharts from "highcharts";
import exportingInit from "highcharts/modules/exporting";
import stockInit from "highcharts/modules/stock";
import { EventBus } from "./../event-bus.js";
stockInit(Highcharts);
exportingInit(Highcharts);
export default {
props: {
partsdata: {
type: Array
}
},
components: {
highcharts: Chart
},
created() {
EventBus.$on("btn-clicked", data => {
this.chartOptions.series[0].data = data.newData;
});
},
data() {
return {
chartOptions: {
chart: {
type: "spline",
title: "Hassaan"
},
xAxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
]
},
tooltip: {
crosshairs: true,
shared: true
},
credits: {
enabled: false
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: "#666666",
lineWidth: 1
}
}
},
series: [
{
data: [1, 2, 3]
}
]
}
};
}
};
</script>
Demo:
https://codesandbox.io/s/nw750l07nj