{"id":205,"date":"2017-04-29T10:36:14","date_gmt":"2017-04-29T10:36:14","guid":{"rendered":"http:\/\/www.dimlucas.com\/?p=205"},"modified":"2017-04-29T10:36:14","modified_gmt":"2017-04-29T10:36:14","slug":"how-to-use-momentjs-with-vue","status":"publish","type":"post","link":"https:\/\/www.dimlucas.com\/index.php\/2017\/04\/29\/how-to-use-momentjs-with-vue\/","title":{"rendered":"How to use momentjs with Vue"},"content":{"rendered":"<p>Okay this is going to be a short one \ud83d\ude42<\/p>\n<p>Momentjs is, without a doubt, the best JavaScript library for handling date and time objects. The first time I tried to use it with Vue though I was greeted with the following message: <\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n&quot;Property or method &quot;moment&quot; is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option&quot;\r\n<\/pre>\n<p>The reason why I got this message was because I was using moment in the view, in my .html file within Vue&#8217;s {{}} delimiters. Let&#8217;s demonstrate this with a simple example.<\/p>\n<p><script async src=\"\/\/jsfiddle.net\/dimlucas\/mzovmbo7\/embed\/js,html,result\/dark\/\"><\/script><\/p>\n<p>In the fiddle above we have a simple Vue instance with a list of posts that will be displayed in a simple table for approval. Everything is simple. We use v-for loop to get each post and then display its data in the table columns. But the postedAt field is a date! We can&#8217;t trust JavaScript to convert our date to a string otherwise it will look awful with all the added stuff like time zones. Let&#8217;s say we want to just format the date using a DD-MM style, meaning that we only want to display the day and month. Nothing else. What comes to every developer&#8217;s mind is, of course, the moment library. So that&#8217;s what we do. We import moment using whatever tool we want, yarn, NPM, jspm, pure script tag with a CDN URL. Just about anything will do. Then assuming that what&#8217;s inside the curly brackets is JavaScript code, we attempt to run the example\u2026. Aaaand we get the error mentioned above. You can actually see it in the console.<\/p>\n<p><b>Why is this happening?<\/b><\/p>\n<p>It&#8217;s all a matter of  &#8220;this&#8221; binding. Notice that whenever you display something in your View that comes from the view-model you do not use the &#8216;this&#8217; keyword like you do inside the view-model. That&#8217;s because the view is tied to the view-model and the use of &#8216;this&#8217; is not needed. Imagine if you had to use &#8216;this&#8217; in your HTML. That would be awful. The moment instance is not in our view-model. It&#8217;s in the global object, window in this case . &#8220;So let&#8217;s just go ahead and put a &#8216;window&#8217; keyword in front of moment&#8221;, you might say. Not so fast. The window object is in the global scope too. So you&#8217;ll get the same error. <\/p>\n<p><b>What can we do to remedy this?<\/b><\/p>\n<p>We need to include a reference of the moment function in our view-model. The solution is actually pretty straightforward. Just add this line<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nmoment: moment\r\n<\/pre>\n<p>either in the &#8216;data&#8217; object or in the &#8216;methods&#8217; object of your view-model. And that&#8217;s it. It&#8217;It&#8217;s going to work. What we essentially did was to delegate moment through our view-model. See the working example:<\/p>\n<p><script async src=\"\/\/jsfiddle.net\/dimlucas\/o2j58n5q\/4\/embed\/js,html,result\/dark\/\"><\/script><\/p>\n<p>And there you have it! Momentjs up and running with Vue in no time.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Okay this is going to be a short one \ud83d\ude42 Momentjs is, without a doubt, the best JavaScript library for handling date and time objects. The first time I tried to use it with Vue though I was greeted with the following message: The reason why I got this message was because I was using [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[3,100,99,102,101,98],"_links":{"self":[{"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/posts\/205"}],"collection":[{"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/comments?post=205"}],"version-history":[{"count":3,"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/posts\/205\/revisions"}],"predecessor-version":[{"id":208,"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/posts\/205\/revisions\/208"}],"wp:attachment":[{"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/media?parent=205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/categories?post=205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/tags?post=205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}