I am trying to use this plugin in my app. I am trying to use the directive in my component like it is shown in the docs:
<input v-if="edit" type="text" v-mask="'999.999.999-99'">
But, I got:
Uncaught (in promise) TypeError: Cannot read property 'value' of
undefined
On, expecting in the console, I could see that this is where the error happens:
exports.default = {
bind: function bind(el, binding) {
var isMoney = false;
if (binding.value.length < 1) return; // this is where the error happens
var inputText = getInputText(el);
I am importing the plugin in my component like so:
import AwesomeMask from 'awesome-mask';
export default {
props: ['data'],
data () {
return {
player: this.data.data,
edit: false,
}
},
directives: {
'mask': AwesomeMask
}
}
What am I doing wrong?
Related
I want to get the inputs from the UIController module and log it into my main appController file. But I'm getting this error shown below. Can anyone please help me out?
This is the UI Controller module:
export default function UIController() {
return {
// get inputs
getInput: function () {
return {
type: document.querySelector(".add__type").value,
description: document.querySelector(".add__description").value,
value: document.querySelector(".add__value").value,
};
},
};
}
This is the main file app Controller:
// Import modules
import UIController from "./UIController.js";
// App controller
((UICtrl) => {
function ctrlAddItem() {
// get input data
let input = UICtrl.getInput();
console.log(input);
}
document.querySelector(".add__btn").addEventListener("click", ctrlAddItem);
})(UIController);
This is the exact error I'm getting in the console
Uncaught TypeError: UICtrl.getInput is not a function
at HTMLButtonElement.ctrlAddItem (appController.js:9)
Since you are returning function from UiController module.
So you will have to add paranthesis() like so let input = UICtrl().getInput(); in your main app Controller.
I am trying to display some data in a stock chart within a Vue.js app, using the highcharts-vue wrapper.
I have encountered a problem when the dataGrouping (active by default) is triggered when the numbers of points in my chart becomes too big. I get the following error:
[Vue warn]: Error in callback for watcher "options": "TypeError: F is undefined"
However, if I deactivates the dataGrouping option, my chart renders fine.
I have tried to overwrite the approximation function (which is supposed to be the average by default for a line chart), but even though I can see that my custom function works well, I get the error anyway.
I tried to make a jsfiddle to reproduce my bug but I didn't find a way to create a stock chart using the highcharts-vue wrapper.
EDIT: I created a sandbox with a stripped-down version of the chart with a sample of my data, but it works well and doesn't reproduce the bug. When I use the same code inside of my app (you can see it here on gitlab), I get my error.
(Actually I get several kinds of errors. When I use vue-cli-service serve and display in Firefox, it says Error in mounted hook: "TypeError: y is undefined", but in Chrome it says Error in mounted hook: "TypeError: Cannot read property 'x' of undefined", and finally when I build the error becomes TypeError: "w is undefined" in Firefox, stays the same in Chrome.)
Here is a full error stack trace:
[Vue warn]: Error in mounted hook: "TypeError: y is undefined"
found in
---> <Highcharts>
<LineChart> at src/components/LineChart.vue
<GridItem> at GridItem.vue
<GridLayout> at GridLayout.vue
<Home> at src/views/Home.vue
<App> at src/App.vue
<Root> vue.runtime.esm.js:601
TypeError: "y is undefined"
translate webpack-internal:///./node_modules/highcharts/highcharts.js:316:361
renderSeries webpack-internal:///./node_modules/highcharts/highcharts.js:279:498
renderSeries webpack-internal:///./node_modules/highcharts/highcharts.js:279:466
render webpack-internal:///./node_modules/highcharts/highcharts.js:281:384
<anonymous> webpack-internal:///./node_modules/highcharts/modules/stock.js:134:7
c webpack-internal:///./node_modules/highcharts/highcharts.js:21:233
<anonymous> webpack-internal:///./node_modules/highcharts/modules/stock.js:134:7
c webpack-internal:///./node_modules/highcharts/highcharts.js:21:233
firstRender webpack-internal:///./node_modules/highcharts/highcharts.js:284:407
init webpack-internal:///./node_modules/highcharts/highcharts.js:258:369
fireEvent webpack-internal:///./node_modules/highcharts/highcharts.js:32:244
init webpack-internal:///./node_modules/highcharts/highcharts.js:257:119
getArgs webpack-internal:///./node_modules/highcharts/highcharts.js:257:39
Chart webpack-internal:///./node_modules/highcharts/highcharts.js:256:337
stockChart webpack-internal:///./node_modules/highcharts/modules/stock.js:139:135
mounted webpack-internal:///./node_modules/highcharts-vue/dist/module/highcharts-vue.min.js:1:1514
callHook webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3037:9
insert webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4255:7
invokeInsertHook webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6046:28
patch webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6265:5
_update webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2777:16
updateComponent webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2898:7
get webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3268:13
Watcher webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3257:7
mountComponent webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2905:3
mount webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:8060:10
<anonymous> webpack-internal:///./src/main.js:39:4
js http://localhost:8080/app.js:2774:1
__webpack_require__ http://localhost:8080/app.js:767:12
fn http://localhost:8080/app.js:130:20
0 http://localhost:8080/app.js:2847:18
__webpack_require__ http://localhost:8080/app.js:767:12
<anonymous> http://localhost:8080/app.js:902:18
<anonymous> http://localhost:8080/app.js:1:11
I downloaded the sandbox code locally and tried to put my app code in it by removing extra things but it wouldn't work, and putting the simple Chart in my original app wouldn't work either.
So I guess the problem might be in mixing the use of vue-cli, vue-router and vue-loader with the use of highcharts-vue. It's possible it is only a simple initialization or import step that I am doing wrong...
Here is the simplified code of my component. The creation of the series is triggered by the modification of a list of probes (checkedProbesOnline) from I which I fetch the data through a call to an API:
<template>
<highcharts :constructor-type="'stockChart'"
:options="config"
:updateArgs="[true, true, true]"
ref="myChart"
style="width: 0; height: 0;"
class="chart"
>
</highcharts>
</template>
<script>
import axios from 'axios'
import Highcharts from 'highcharts';
import stockInit from 'highcharts/modules/stock';
stockInit(Highcharts);
export default {
name: "LineChart",
props: {
checkedProbes: Array,
name: String,
suffix: String,
callName: String
},
data() {
return {
series: []
}
},
computed: {
checkedProbesOnline() {
return this.checkedProbes.filter(probe => probe.online);
},
config() {
return {
series: this.series
};
}
},
watch: {
checkedProbesOnline(newValue) {
this.series = [];
this.createChart();
}
},
mounted() {
this.refresh();
},
methods: {
createSerie(name, data) {
return {
name: name,
data: data,
tooltip: {
valueDecimals: 1,
valueSuffix: this.suffix
},
dataGrouping: {
approximation: function() {
let start = this.cropStart + this.dataGroupInfo.start;
let rawData = this.options.data.slice( start, start + this.dataGroupInfo.length );
return (rawData.length > 0) ? rawData.map(a => a[1]).reduce((a, b) => (a + b))/this.dataGroupInfo.length : 0;
}
}
}
},
async getSerie(probe, dateStart, dateEnd) {
await axios.get('http://example.com')
.then(response => response.data)
.then(data => {
let serieData = [];
for (let i = 0; i < data.data.length; i++) {
let timestamp = new Date(data.data[i].measurements.date);
serieData.push([timestamp.getTime(), data.data[i].measurements[this.callName]]);
}
let serie = this.createSerie(probe.id, serieData);
this.series.push(serie);
})
.catch(err => {
console.log(err);
});
},
async createChart() {
let now = Date.now()/1000;
let before = now - (60 * 60);
let promises = [];
for (let probe of this.checkedProbesOnline)
promises.push(this.getSerie(probe, before, now));
await Promise.all(promises).then(this.refresh);
},
refresh() {
this.$refs.myChart.$el.style.width = '100%';
this.$refs.myChart.$el.style.height = '100%';
this.$refs.myChart.chart.reflow();
}
}
}
</script>
If you want to see the JSON data returned by my API, I copied it here: gist
I looked everywhere for someone getting the same bug but didn't find anything so any help or advice would be immensely appreciated.
Im learning to make Vue Plugin, based on https://v2.vuejs.org/v2/guide/plugins.html,
this is my simple code:
plugin1.js:
AlertPlugin.install = function (Vue, options) {
Vue.prototype.$classicalert = function (message) {
alert(message)
};
};
app.js:
window.Vue = require('vue');
import AlertPlugin from './plugin1.js'
Vue.use(AlertPlugin);
const app = new Vue({
el: '#app',
render: h => h(Main)
});
when im trying to run it, the web page become blank, and error AlertPlugin is not defined.
please help?
In your plugin1.js file, you are attempting to set the install property of the AlertPlugin object, which (as the error says) is not defined.
Your plugin1.js file should look like this:
export default {
install: function (Vue, options) {
Vue.prototype.$classicalert = function (message) {
alert(message)
};
}
}
This defines a default object to export containing a property install. When you import this object as AlertPlugin, like you are doing in app.js, it will result in an AlertPlugin object with the install property you defined in the plugin's file.
i'm playing with Vue 2.0, but there is something unclear..
how can i pass the props to the internal data of a component?
Looking at the documentation it seems that i have done right.
HTML
<lista-servizi :servizi="modello"></lista-servizi>
the "modello" is a data already defined.
THE VUE COMPONENT
Vue.component('lista-servizi', {
template:
'<span class="blu">{{listaServizi.lineaGialla.descrizione}}</span>',
props: ['servizi'],
data: function(){
return{
listaServizi : this.servizi
}
basically i try to give to data listaServizi the same value as props servizi,
but in the console i have the following message:
[Vue warn]: Error in render function: "TypeError: Cannot read property 'descrizione' of undefined"
found in
---> <ListaServizi>
<Root>
You should used computed instead.
Vue.component('lista-servizi', {
//...
computed: {
listaServizi() {
return this.servizi
}
}
}
Most likely you have a problem with modello.
By defining the modello, your code works fine. Below is an example based on your code that works:
<div id="app-1">
<lista-servizi :servizi="modello"></lista-servizi>
</div>
Vue.component('lista-servizi', {
template: '<span class="blu">{{listaServizi.lineaGialla.descrizione}}</span>',
props: ['servizi'],
data: function(){
return{
listaServizi : this.servizi
}
}
})
var app1 = new Vue({
el: '#app-1',
data: {
modello: {
lineaGialla : {
descrizione : " This is a description"
}
}
}
})
Here is a link to a working bin
https://jsbin.com/qoloqoz/1/edit?html,js,output
I'm new to React and Javascript and I'm trying to render the following React component:
'use strict';
var React = require('react');
import ToReadList from './toreadlist.js';
var ToRead = React.createClass({
getInitialState: function() {
return { bookTitles: [] };
},
handleSubmit: function(e) {
e.preventDefault();
this.state.bookTitles.push(React.findDOMNode(this.refs.bookTitleInput).value.trim());
this.setState({items: this.state.bookTitles});
},
render: function() {
return (<div>
<form onSubmit={this.handleSubmit}><input type="text" ref="bookTitleInput"></input>
<input type="submit"></input></form>
<ToReadList bookTitles={this.state.bookTitles} />
</div>
);
}
});
module.exports = ToRead;
But I am having the following error on my console: "Uncaught TypeError: Cannot read property 'toUpperCase' of undefined"
I tried to debug (because the error is obscure to me and no line in my code is indicated) and noticed that this particular line:
this.state.bookTitles.push()
causes the error.
Please help!
Edit
The error is caused by a webpack var injection function:
function autoGenerateWrapperClass(type) {
return ReactClass.createClass({
tagName: type.toUpperCase(),
render: function() {
return new ReactElement(
type,
null,
null,
null,
null,
this.props
);
}
});
}
findDOMNode() uses the toUpperCase() function which actually is called on a null.
Example
var x = null
x.toUpperCase()// results in this error.
If you could post the findDOMNode() code, we could trace out the error.
OR
Make sure that the toUpperCase() is called on a non-null object.
My appologies for the poor quality of this post.
I resolved the issue.
Finally, the problem came from the included component:
<ToReadList bookTitles={this.state.bookTitles} />
The error appeared when this.state.bookTitles.push(React.findDOMNode(this.refs.bookTitleInput).value.trim()); was called because bookTitles triggers the error inside the component when it is not empty (i.e <ToReadList bookTitles={["mastery", "foundation"]} /> triggers exactly the same error)
The compenent in question's code is as such:
'use strict';
var React = require('react');
import {ToReadListItem} from './todoreadlistitem.js';
var ToReadList = React.createClass({
render: function() {
return (<ul>
{this.props.bookTitles.map(function(bookTitle){
return (<li>
<ToReadListItem bookTitle={bookTitle} isChecked={false}/>
</li>);
})}
</ul>);
}
});
module.exports = ToReadList;
Changing this line:
import {ToReadListItem} from './todoreadlistitem.js';
To this:
import ToReadListItem from './todoreadlistitem.js';
I know, it is not a great idea to mix es6 syntax with flat one, but I permit myself doing it since the app is for experimentation purposes.
I hope I helped to make things clearer.
I guess the problem is because you try to modify the state directly. Try this:
var newBookTitles = this.state.bookTitles;
var value = React.findDOMNode(this.refs.bookTitleInput).value.trim();
newBookTitles.push(value);
this.setState({bookTitles: newBookTitles});
I hope it will solve your problem.
Importing component with incorrect name gave me the same error.
I had imported it as
var AreaChart = Charts.AreaChart;
where as in Charts.js it was exported with a small 'c' :
Areachart: Areachart
Changing it to AreaChart: Areachart in Charts.js while exporting solved it.