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!

Advertisements

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.

“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/

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

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"

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;
}