August 2, 2017

Vue.js – Cannot read property ‘get’ of undefined

Trying to get a http request in Vue.js:

this.$http.get('ApiURL')

I got error: Cannot read property ‘get’ of undefined

After a long, long searching I found the solution.

In your main.js file bold lines are the solution:

//your imports...
import vueResource from 'vue-resource'

Vue.use(vueResource)

new Vue({
  //your vue configuration
})

And then you can use Vue.http in your methods:

methods: {
  yourMethod: function () {
    Vue.http.get('yourApiURL').then((response) => {
        console.log('data: ', response.body)
        this.yourDataObject = response.body
    })
  }
}

You are welcome!

Advertisement
October 8, 2013

A perfect web app framework

What should a perfect web app framework do? I have programmed a few PHP and JavaScript applications and in almost every app I needed:

  • Routes
  • Built in support for LESS/SASS (or at least simple installation)
  • Built in jQuery
  • ORM or simple Model-database access. Mainly for relations – 1:m, n:m
  • AJAX support. I mean auto redraw template after successful AJAX call or/and websockets support for realtime web
  • Internationalization and localization support
  • easy deployment (eg. $ meteor deploy myapp.meteor.com)
  • Pre-built authentication
  • tools for CSS and JS minification
  • mapping data from/to HTML form

MeteorJS is closest to be the perfect web app framework. I hope and believe it will be the perfect web app framework.

October 2, 2013

“clone” file input

I had a form with plenty of inputs and one (hidden) file input. File had to be selected in modal window. So I cloned the file input in modal into the form. It worked prefectly for Firefox and Opera but not for Chrome for security reasons.

I have read plenty of similar solutions but none of them worked in Chrome.

So I found out other way – move the file input instead of cloning.
See http://jsfiddle.net/E8DBZ/2/

June 5, 2013

Elfinder itegration into TinyMCE4

This solution http://stackoverflow.com/questions/16016870/tinymce-4-with-elfinder did not work for me. I wanted to answer this thread but I don’t have enough reputation.

When you click on “Upload image”:

tinymce-img-upload

Tinymce will show “dialog.php” file in “tinymce/plugins/filemanager/dialog.php” by default. So copy Elfinder folder into “tinymce/plugins/” and rename the folder to “filemanager“. Rename “elfinder.html” to “dialog.php“. And rewrite options in “tinymce/plugins/filemanager/php/connector.php” like this:

$opts = array(
	// 'debug' => true,
	'roots' => array(
		array(
			'driver'        => 'LocalFileSystem',   // driver for accessing file system (REQUIRED)
			'path'          => '../img/',         // path to files (REQUIRED)
			'URL'           => dirname($_SERVER['PHP_SELF']) . '../../img/', // URL to files (REQUIRED)
			'accessControl' => 'access'             // disable and hide dot starting files (OPTIONAL)
		)
	)
);

I changed ‘path‘ and ‘URL‘. It now shows images in “tinymce/plugins/filemanager/img/”

I have TinyMCE in my www (root) folder and “uploads” folder too. So in my case I have 

'path' => '../../../../uploads/'

and

'URL' => dirname($_SERVER['PHP_SELF']) . '../../../../../uploads/'

It works for me. For you it should work too.
If You have any problem with Elfinder, try this filemanager https://github.com/2b3ez/FileManager4TinyMCE

March 14, 2013

LESS.js – LESS variables does not work

Simple solution! I had included css file before I decided to use LESS so I just changed file css to less:

<link rel="stylesheet" type="text/css" href="css/style.less">
<script type="text/javascript" src="js/less.js"></script>

BUT, It did not work!

This worked:

<link rel="stylesheet/less" type="text/css" href="css/style.less">
<script type="text/javascript" src="js/less.js"></script>

U see difference? No? 😉

rel="stylesheet/less"

March 11, 2013

JavaScript function with default values

In PHP you can define default values like this:

function add($a = 0, $b = 0) {
  return $a + $b;
}

So I did the same in JavaScript:

function add(a = 0, b = 0) {
  return a + b;
}

But it works only in Firefox. Other browsers do not support this format.
Cross browser default values should be defined like this:

function add(a, b) {
  a = a || 0;
  b = b || ;
  return a + b;
}

January 23, 2013

Using Fuelux spinner with form

If you want to use Fuelux spinner with <form> tag, you have to do two things:

  1. Add type="button" attribute to ‘up’ and ‘down’ buttons. Form will not send when you click the buttons.
  2. Add following script to your javascript file:

    $('.spinner').each(function(i, item) {
       var val = parseInt($(this).find('.spinner-input').val());
       $(this).spinner('value', val);
    });

    It will set values to Fuelux spinner and won’t count it from 1 but from input value.
January 17, 2013

PHP WTF foreach loop

I have worked with PHP for a few years but recently i found a big WTF factor for me as a former Java developer. Foreach loop in PHP has not its own scope! It means this:

<?php

$name = 'Peter';
echo '$name = "'. $name . '"; before foreach.<hr>';

$names = array('Mark', 'Peter', 'John');

foreach($names as $name) {
   echo '$name = "'. $name .'"; in foreach.<br>';
}

echo '<hr>$name = "'. $name .'"; after foreach<br>';

will result in:

$name = "Peter"; before foreach.
---------------------------------------------------------
$name = "Mark"; in foreach.
$name = "Peter"; in foreach.
$name = "John"; in foreach.
---------------------------------------------------------
$name = "John"; after foreach

It means the $name variable is rewritten by foreach and it’s BAD!!!
What if i want to say “Hi Peter” after this foreach and instead of it, it will say “Hi John”.
Any suggestions how to avoid this?