Develop Reference

Vue.js Cannot read property 'split' of undefined

I'm showing page breaks within my vue.js application.
<div class="Message__body__message">
<p v-for="line in message.message.split('\n')" track-by="$index">{{ line }}<br></p>
</div>
But I receive the error:
main.js:7382 [Vue warn]: Error when evaluating expression "message.message.split('\n')": TypeError: Cannot read property 'split' of undefined
But message.message is not empty! I even receive the expected result, so why does it throw this error?

I even receive the expected result, so why does it throw this error?
Because at some stage, it is undefined. Clearly, if you're ultimately getting the result you expect, it's then becoming defined, but that's later.
You could work around it by doing:
v-for="line in (message.message || "").split('\n')"
...but it would probably be better to look at the greater picture of what that code's doing and find out why message.message is undefined at times it's trying to evaluate that.
As Bill Criswell points out in a comment, you might look at using a computed property on your model for that rather than an in-template expression. E.g.:
var vm = new Vue({
// ...your other stuff here...
// Computed properties:
computed: {
messageLines: function() {
return (this.message.message || "").split("\n");
}
}
});
then
v-for="line in messageLines"

The view load when the page is first time load or message.message change.
I believe that you have use vue data in wrong way like this.
data: function(){
return {
message: {}
}
}
Obviously, you have defined message attribute in data, but not define message.message. So first time when it load, message is still empty, it still didn't get your ajax response, so it tells that message.message is undefined. You should change it into this, use nested attribute, to set a legal value.
data: function(){
return {
message: {message: ''}
}
}
You should understand that the view get render at least 2 times, first time use default value you set in data, other time when you change the message, in ajax callback or other situation.

message.message might not be available when vue tried to load it. Request vue to try to load message.message only when message.message is available.
The following worked for me.
<div class="Message__body__message" v-if="message.message">
<p v-for="line in message.message.split('\n')" track-by="$index">{{ line }}<br></p> </div>

Possible causes of Cannot read property constructor of undefined

I want to iterate over all the forms present in a div. So I am using the following code for this
$('#divid form').each(function (index, formDetails) {
if (formDetails) {
console.log($(formDetails).attr('id'));
}
});
This is working fine in Mozilla with no issues but when I run this code in Chrome sometimes it throws the following error.
This error is coming
Uncaught TypeError: Cannot read property 'Constructor' of undefined
I am using Version 33.0.1750.117 m of Chrome.
Why this error is coming I am not able to understand?

Sounds like you don't have jQuery included before your try and load your functions.
Wrap your javascript code inside the below function:
$(document).ready(function() {
alert('loaded');
}
Also check if the initial is $ or jQuery

Firefox event.clientX not functioning

I'm working on a d3 and js project.
The beginning of the function looks like:
$(document).ready(function() {
d3.select("#aid").select(".abutton").on("mousemove",function() {
afile.style("top", (event.clientY+10)+"px").style("left",(event.clientX+15)+"px");
afile.html("<h3>Click text here</p><p>or here</p>");
});
I've done quite a bit of Googling!
The essence is that on mouseover, it should do the function. This works in Chrome and IE because the event variable is global, and as such so are it's client* properties.
The solution, as I understand it, is to pass in an eventObject. When I do that, my code looks like:
$(document).ready(function() {
d3.select("#aid").select(".abutton").on("mousemove",function(event) {
afile.style("top", (event.clientY+10)+"px").style("left",(event.clientX+15)+"px");
afile.html("<h3>Click text here</p><p>or here</p>");
});
The Firefox log gives me:
[09:59:04.308] TypeError: event is undefined # filepathofjavascriptfile
and similarly, it breaks in Chrome:
Uncaught TypeError: Cannot read property 'clientY' of undefined filepathofjavascriptfile
(anonymous function) help.js:34
What am I doing wrong? Please let me know if you need anything else.

Try:
d3.select("#aid").select(".abutton").on("mousemove",function() {
afile.style("top", (d3.event.clientY+10)+"px").style("left",(d3.event.clientX+15)+"px");
afile.html("<h3>Click text here</p><p>or here</p>");
});
For whatever reason, that's how d3 exposes the event object.

Weird error msg when using JS.call?

While debugging I became confused at my error. I'm using firefox+firebug
When executing this code demo I get the error
TypeError: myranges.call(...) is undefined
Code:
var myranges = function(d){
//return [5,8];
return d.undefmember;
};
myranges.call(this, 1, 2).slice();
This confused me. When I do a proper return value demo I get no issues with that line (what!?!).
Ok so it returns undefined. So shouldn't I get this better error message?
TypeError: undefined has no properties
Which happens in this demo
I'm mostly confused at either why i got that message or what does it really mean. I thought it had a problem calling the function or myranges was bad

This is most likely a problem with firebug, because demo gives TypeError: Cannot read property 'slice' of undefined right from the JS

JQuery: .hide() is not a valid function

Firebug is complaining about this line:
$("#original-description").text(response['course']['original_description']).hide();
Do I have a syntax error? Looks fine to me.
More context:
bindOnSuccess($('#course-search'), function(response) {
if (!response) {
$("#system-status").text("Sorry, no course could be found for that search.");
}
else {
$(".dept-code").text(response['course']['dept_code']);
$(".course-number").text(response['course']['number']);
$(".course-title").text(response['course']['title']);
$("#div-original-description").show();
$("#original-description-teaser").show();
// error here
$("#original-description").text(response['course']['original_description']).hide();
$("#td-required-for").text(response['analysis']['cRequiredFor']);
}
});
response is a JSON object. Could this problem be caused by invalid subscripts?
Firebug's error is:
$("#original-description").text(response.course.original_description).hide is not a function

The other answers are pointing out incorrectly - .text() returns the jQuery object. You are probably referencing an undefined property. I can replicate this:
$('<p>').text(undefined).hide()
Make sure you are referencing the right property in the JSON.
TypeError: $("<p>").text(undefined).hide is not a function { message="$("<p>").text(undefined).hide is not a function", more...}
If you want to query the object live you can simply do
window.o = response in your callback function and just play around with it in Firebug console.