Develop Reference

quill Overwriting formats/div with?

Why am I getting a warning in the console, my codes are as follows?
Quill.tagName = 'DIV'; I used the line nothing changed.
import '#vueup/vue-quill/dist/vue-quill.core.css';
import '#vueup/vue-quill/dist/vue-quill.snow.css';
import '#vueup/vue-quill/dist/vue-quill.bubble.css';
import { QuillEditor, Quill } from '#vueup/vue-quill'
import htmlEditButton from "quill-html-edit-button";
Quill.register("modules/htmlEditButton", htmlEditButton);
export default {
name: "Edit",
components: { ValidateError, QuillEditor },
props: {
dat: Object,
},
data(){
return {
submitted: false,
editorOption: {
modules: {
clipboard: {
matchVisual: false
},
toolbar: [
["bold", "italic", "underline", "strike"],
[{ header: [!1, 1, 2, 3, 4, 5, 6] }, "blockquote", "code-block"],
[{ list: "ordered" }, { list: "bullet" }, { indent: "-1" }, { indent: "+1" }],
[{ align: [] }],
["link"],
["clean"],
],
htmlEditButton: {},
},
placeholder: "Write...",
},
}
},
}
I am getting warnings like below in console. I've been struggling for 2 days and I couldn't get rid of this error message.
quill Overwriting formats/div with
function e()​
allowedChildren: Array(29) [ e(), e(), e()
, … ]
blotName: "div"
length: 0
name: "e"
prototype: Object { constructor: e()
}
tagName: "DIV"
<prototype>: function e(t)

Vue: When importing a particular component I receive a Type Error

I am currently creating a SPA using Vue, and I am using a UI framework called Vue Argon Dashboard Pro
I am trying to import this particular component called Select.
Based on the documentation it says I just need to add the following lines.
import { ElSelect, ElOption } from "element-plus";
export default {
components: {
[ElSelect.name]: ElSelect,
[ElOption.name]: ElOption
}
}
Now when I add them to an isolated page, I would receive the following errors.
[vue-router] Failed to resolve async component default: TypeError:
Object(...) is not a function
[vue-router] uncaught error during route navigation:
TypeError: Object(...) is not a function
These errors aren't giving me any clue what am I doing wrong because I have other pages with other components that are working well, and this component is just the one not working properly.
Here's my Test.vue
<template>
<div class="container">
<el-select placeholder="Single Select" v-model="selects.simple" filterable>
<el-option
v-for="option in selects.languages"
class="select-danger"
:value="option.value"
:label="option.label"
:key="option.label"
>
</el-option>
</el-select>
</div>
</template>
<script>
import { ElSelect, ElOption } from "element-plus";
export default {
name: "TestPage",
components: {
[ElSelect.name]: ElSelect,
[ElOption.name]: ElOption
},
data() {
return {
selects: {
simple: "",
languages: [
{ value: "Bahasa Indonesia", label: "Bahasa Indonesia" },
{ value: "Bahasa Melayu", label: "Bahasa Melayu" },
{ value: "Català", label: "Català" },
{ value: "Dansk", label: "Dansk" },
{ value: "Deutsch", label: "Deutsch" },
{ value: "English", label: "English" },
{ value: "Español", label: "Español" },
{ value: "Eλληνικά", label: "Eλληνικά" },
{ value: "Français", label: "Français" },
{ value: "Italiano", label: "Italiano" },
{ value: "Magyar", label: "Magyar" },
{ value: "Nederlands", label: "Nederlands" },
{ value: "Norsk", label: "Norsk" },
{ value: "Polski", label: "Polski" },
{ value: "Português", label: "Português" },
{ value: "Suomi", label: "Suomi" },
{ value: "Svenska", label: "Svenska" },
{ value: "Türkçe", label: "Türkçe" },
{ value: "Íslenska", label: "Íslenska" },
{ value: "Čeština", label: "Čeština" },
{ value: "Русский", label: "Русский" },
{ value: "ภาษาไทย", label: "ภาษาไทย" },
{ value: "中文 (简体)", label: "中文 (简体)" },
{ value: 'W">中文 (繁體)', label: 'W">中文 (繁體)' },
{ value: "日本語", label: "日本語" },
{ value: "한국어", label: "한국어" }
]
}
};
}
};
</script>
Here is my Router.js file as this was pointed out the issue on the other question raised
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
const routes = [
{
path: "/test",
name: "TestPage",
component: () =>
import(/* webpackChunkName: "bundle.test" */ "#/views/Test.vue")
}
];
const router = new Router({
mode: "history",
routes
});
export default router;
Hoping all those details help. Thank you

How to call a method depending on a computed property in vuejs

I am calling fetchData() method from computed property. I don't know this is the correct way or not. I have also another dependability in Watch function. fetchData() will also call when expertId will change.
I can call fetchData() function using watch or computed property it works though I am confused this process is correct or not. But, the problem is in my Computed property! after fetching data fullCalendar is reloading, and then somehow this.dateInfo is overwriting and, calling computed property again and again. Just like a recursion. Making call continuously.
import FullCalendar from "#fullcalendar/vue";
import dayGridPlugin from "#fullcalendar/daygrid";
import timeGridPlugin from "#fullcalendar/timegrid";
import deLocale from "#fullcalendar/core/locales/de";
export default {
components: {
FullCalendar,
},
props: {
expertId: Number | String,
leadToOpen: Number | String,
config: Object,
defaultView: {
type: String,
default: "timeGridWeek",
},
header: {
type: Object,
default() {
return {
left: "title",
center: "timeGridWeek dayGridMonth dayGrid",
right: "today prev,next",
};
},
},
goTo: {
type: Date,
default: null,
},
},
watch: {
expertId(newId, oldId) {
if (history.pushState) {
var newurl =
window.location.protocol +
"//" +
window.location.host +
window.location.pathname +
`?user=${newId}`;
window.history.pushState({ path: newurl }, "", newurl);
}
this.fetchData();
},
// dateInfo(){
// this.fetchData();
// }
},
data() {
return {
events: {
type: Array,
default(){
return{
id: 'a',
title: 'my event',
start: '2020-10-10'
}
}
},
dateInfo: null,
busy: false,
displayAppointment: null,
displayOwner: null,
eventTypes: [
{ name: "Kundentermin", color: "#32bb60" },
{ name: "Termin bei Lead", color: "#db0630" },
{ name: "Termin ohne Kunde/Lead", color: "#3f888f" },
{ name: "Privater Termin (akzeptiert)", color: "#4682B4" },
{ name: "Privater Termin (offen)", color: "#505050" },
{ name: "Ehemaliger Termin", color: "#cdcdcd" },
],
showEdit: false,
showInfo: false,
showModal: false,
leadId: null,
locale: "de",
locales: [deLocale],
calendarOptions: {
headerToolbar: this.header,
plugins: [dayGridPlugin, timeGridPlugin],
initialView: "timeGridWeek",
eventClick: this.eventClickHandler,
events: null,
slotMinTime: "07:00:00",
slotMaxTime: "21:00:00",
locale: "de",
locales: [deLocale],
ref: "calendar",
eventDisplay: "block",
displayEventTime: false,
height: "auto",
allDaySlot: false,
buttonText: {
dayGrid: "Tag",
},
lazyFetching: true,
datesSet: (dateInfo) => {
this.dateInfo = dateInfo; // using this vale in Computed property
}
},
};
},
methods: {
async fetchData() {
this.busy = true;
const response = await axios.get("/api/users/" + this.expertId + "/startTime/" + this.dateInfo.startStr + "/endTime/" + this.dateInfo.endStr);
this.events = response.data;
this.calendarOptions.events = response.data;
this.busy = false;
},
},
computed: {
myDateInfo: function(){
let v = this.dateInfo;
this.fetchData(); // I need to call fetchData(), when this.dateInfo will change.
},
},
mounted() {
this.fetchData();
if (this.$props["leadToOpen"]) {
this.leadId = this.leadToOpen;
this.showModal = true;
}
if (this.goTo) {
this.$refs.calendar.getApi().gotoDate(this.goTo);
}
},
};

Vue ChartJS not rendering when page reloads

This problem may seem to already exist but I also tried those and some are inactive now. My goal is to make the chart reactive whenever the page reloads. I tried to the solution from the Vue page itself i.e. add watchers and mixins but it doesn't work, as commented by others stuck like me. Mine only render if I change the width and height of the chart but everytime I refresh it, it disappears.
Dashboard.vue
<template>
<div align="center">
<LineChart :chartData="chartData" :options="options" style="width:auto;height:auto;" />
</div>
</template>
<script>
export default {
data() {
return {
chartData: {
labels: [],
datasets: [
{
data: [],
backgroundColor: "#3498db",
borderColor: "rgba(136,136,136,0.5)",
label: "",
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
text: "Student's Score Chart",
},
tooltips: {
mode: "index",
intersect: false,
},
hover: {
mode: "nearest",
intersect: true,
},
scales: {
xAxes: [
{
display: true,
scaleLabel: {
display: true,
labelString: "Student Names",
},
},
],
yAxes: [
{
display: true,
scaleLabel: {
display: true,
labelString: "Score Points",
},
},
],
},
},
mounted() {
this.getListData();
},
methods: {
getListData() {
axios
.get("http://localhost/MyComposer/", {
params: {
answerId: 6,
token: this.token,
},
})
.then((response) => {
console.log(response.data);
for (var k = 0; k < response.data.length; k++) {
const fullName =
response.data[k].FirstName +
" " +
response.data[k].MiddleName +
" " +
response.data[k].LastName;
this.chartData.labels.push(
fullName + " (" + response.data[k].TestName + ") "
);
this.chartData.datasets[0].data.push(response.data[k].Score);
console.log(this.chartData);
}
})
.catch(function (error) {
console.log(error);
});
},
}
}
ChartContainer.js
import { Line, mixins } from 'vue-chartjs'
export default {
extends: Line,
mixins: [mixins.reactiveProp],
props: ['chartData', 'options'],
mounted () {
this.renderChart(this.chartData, this.options)
},
watch: {
chartData () {
this.renderChart(this.chartData, this.options)
}
}
}

I solved the problem. It was on the documentations all along. For you guys who didn't know, you should just add v-if to only enable the mounted method to activate when the page has loaded.
<line-chart
v-if="loaded"
:chart-data="this.chartData"
:options="this.options"
style="width:auto;height:auto;"
></line-chart>
data: {
loaded: false
}
getListData(){
this.loaded = true;
//My Axios API Request
}

Apex charts, setting series data from array in state

In my react app, I'm getting results from pouchDB that I want to use as the data points in my series for apexCharts.
I'm getting the results and putting them in state, called maxCalories, and when logging in the console they are in this format:
So I want those 7 numbers (all with the index name of caloriesBurned to be my data in the series for the chart but I'm currently getting NaN on the graph.
Here's the full code, how can I set these to the correct format to use them in the chart data?
import React, { Component } from "react";
import Chart from "react-apexcharts";
import DB from '../../db';
import * as moment from 'moment';
class TrendsComponent extends Component {
constructor(props) {
super(props);
this.state = {
maxCalories: '',
calorieRecord: {
caloriesConsumed: '',
caloriesBurned: '',
createdAt: this.newestDate,
updatedAt: undefined
},
caloriesDB: new DB('calorie-records'),
calories: {},
calorieElements: null,
options: {
},
chart: {
toolbar: {
show:false
},
id: "basic-bar"
},
xaxis: {
categories: ['3/20', '3/21', '3/22', '3/23', '3/24', '3/25','3/26']
}
},
series: [
{
name: "Trend (tracked)",
data: {this.maxCalories}
}
]
};
}
componentDidMount(){
this.setMax();
}
setMax = () => {
this.state.caloriesDB.db.find({
selector: {
$and: [
{_id: {"$gte": null}},
{caloriesBurned: {$exists: true}},
{createdAt: {$exists: true}}
]
},
fields: ['caloriesBurned', 'createdAt'],
sort: [{'_id':'desc'}],
limit: 7
}).then(result => {
console.log('max');
console.log(result);
const newDocs = result.docs;
this.setState({
maxCalories: newDocs.map(docs => docs)
});
console.log('maxCalories');
console.log(this.state.maxCalories);
}).catch((err) =>{
console.log(err);
});
}
render() {
return (
<div className="mixed-chart">
<Chart
options={this.state.options}
series={this.state.series}
type="area"
stacked="true"
width="700"
/>
</div>
);
}
}
export default TrendsComponent;

I had the same problem in my project. And I spent a lot of time in looking for solution. So here what I get:
const FinacialResultChart = (props) => {
const options = {
chart: {
toolbar: {
show: false
},
animations: {
enabled: false
}
},
stroke: {
curve: "smooth",
dashArray: [0, 8],
width: [4, 2]
},
grid: {
borderColor: props.labelColor
},
legend: {
show: false
},
colors: [props.dangerLight, props.strokeColor],
fill: {
type: "gradient",
gradient: {
shade: "dark",
inverseColors: false,
gradientToColors: [props.primary, props.strokeColor],
shadeIntensity: 1,
type: "horizontal",
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100, 100, 100]
}
},
markers: {
size: 0,
hover: {
size: 5
}
},
xaxis: {
labels: {
style: {
colors: props.strokeColor
}
},
axisTicks: {
show: false
},
categories: [
"Январь",
"Февраль",
"Март",
"Апрель",
"Май",
"Июнь",
"Июль",
"Август",
"Сентябрь",
"Октябрь",
"Ноябрь",
"Декабрь"
],
axisBorder: {
show: false
},
tickPlacement: "on"
},
yaxis: {
tickAmount: 5,
labels: {
style: {
color: props.strokeColor
}
}
},
tooltip: {
x: { show: false }
}
}
const data = [
{
name: "Итоговый результат",
data: props.userData.traidingMonth
}
]
return (
<Chart
options={options}
series={data}
type="line"
height={280}
/>
)
}
export default FinacialResultChart
So you need to change your class to const, and push all your props (api data for example) into your children chart component. In chart options you can get the chart data with props.data