Develop Reference

Using Draggable in Vue 2

I'm not a total n00b, but I am woefully ignorant of modern Javascript. Most of my scant Vue.js experience has been trying to figure this issue out. I open with this, dear internet, to impress upon you that I'd like it if you'd dumb down your answer as dumb you can.
I'm using Laravel 6/Vue 2 to build a kanban board. My HTML for a single list is as follows:
<section id="lists">
<div class="list full-height" v-for="list in this.results.tlists">
<div contenteditable="true" #blur="saveTitle('list', $event)" #keydown.enter="saveTitle('list', $event);" class="name">#{{ list.name }}</div>
<div class="task" v-for="task in list.tasks">
<p contenteditable="true" #blur="saveTitle('task', $event)" #keydown.enter="saveTitle('task', $event)" >#{{ task.name }}</p>
<div contenteditable="true" v-bind:style="'background-color: #' + tag.hex_color" v-bind:title=tag.name class="tag" v-for="tag in task.tags">
#{{ tag.name }}
</div>
</div>
</div>
</div>
To use Draggable, I start with the documentation on GitHub:
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdn.jsdelivr.net/npm/sortablejs#1.8.4/Sortable.min.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.buttflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
As an aside, Butt to Butt did its thing on the URL for Vue.Draggable. I was initially trying to import from cdnjs.buttflare.com.
Per the instructions, I convert the .list div to a draggable element. This is what the console tells me:
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
There's an issue in GitHub that recommends replacing the draggable tag like so:
<tbody is="draggable" :list="category.Items" v-bind:element="'tbody'" v-on:move="RowMoved">
I turned the draggable element back to a div and replaced the .list line with:
<div is="draggable" :list="this.results.tlists" v-bind:element="'div'" class="list full-height" v-for="list in this.results.tlists" v-on:Move="mvList">
I'm not familiar with ":list" so I took a guess. The console indicates my guess was not a good one:
[Vue warn]: Error in render: "TypeError: this.results is undefined"
(found in ) vue.esm.browser.js:627:15
[Vue warn]: Error in render: "TypeError: this.results is undefined"
(found in ) vue.esm.browser.js:627:15
TypeError: "this.results is undefined" TypeError: "this.results is undefined"
I suspect the reason it's not defined is because the ajax call hasn't run to give it a value. I tried omitting it entirely but got the earlier error message about unknown custom element.
I'm not sure where to go from here. All my attempts at Googling have been so far afield of my situation that they're not helpful. Any insight would be much appreciated.
Edit: The definition of the ajax call:
mounted() {
var token = 'whatever token';
axios.post("[my dev box]/show-board?id=1", {}, {
headers: { 'Authorization': "Bearer " + token }
})
.then(response => {
this.results = response.data.data
});
}

Vue templates debugging

Maybe its just the fact that I'm not used to using them, but it's hard for me to read and debug templates. I’m trying to figure out if there is a way to use JSX outside of render method or a good linter that would look inside the templates, but can't seem to find anything.
example of the simple issue where closing tag of is missing inside a template:
template:
<div id="movie-filter">
<h2>Filter results</h2>
<div class="filter-group">
<check-filter
v-for="ganre in ganres"
v-bind:title="ganre"
v-on:check-filter="checkFilter"
<!-- forgot to close the tag with ">" -->
</check-filter>
</div>
</div>
Thanks, any recomendations apreciated!

Angular 2 Uncaught Error: Template parse errors:

Basically this is my code:
<div class="container">
<div [hidden]="loggedIn">
<md-grid-list cols="6" [style.margin-top]="'20px'">
<md-grid-tile [colspan]="1"></md-grid-tile>
And I have already added the md-input-container for instance into my style.css file. When I ran my Angular 2 in terminal it said compile successfully. But when I open my chrome to see the actual website. It does have errors shown below:
Uncaught Error: Template parse errors:
Can't bind to 'colspan' since it isn't a known property of 'md-grid-tile'.
1. If 'md-grid-tile' is an Angular component and it has 'colspan' input, then `verify that
it is part of this module.
2. If 'md-grid-tile' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to
the '#NgModule.schemas' of this component to suppress this message.

You need to use it as, otherwise it will take it as a input property which you need to declare inside the component
<md-grid-tile colspan="1"></md-grid-tile>

When you enter
[colspan]="1"
It expects a variable from the component, what you need is
colspan="1"

ngCache with Webpack, ES6 not outputting template html, parse error

I am attempting to us ng-cache in order to pull in my templates in an angular project written in ES6 and using webpack.
I have the following files:
dashboard.config.js:
require('ng-cache!./index.html');
require('ng-cache!./nav-sidebar.html');
export default function DashboardConfig($stateProvider) {
'ngInject';
// Define the routes
$stateProvider
.state('dashboard', {
url: '/dashboard',
controller: 'DashboardController as $ctrl',
templateUrl: 'index.html'
});
}
This generates the following error when running webpack:
Error: Parse Error: <div class=\"clearfix\"></div>\r\n\r\n<div flex layout=\"row\" class=\"dashboard\">\r\n\r\n Dashboard!\r\n <ng-include src=\"'nav-sidebar.html'\"></ng-include>\r\n\r\n <!-- Container #3 -->\r\n\r\n\r\n <!-- Container #4 -->\r\n <md-content id=\"dashboard-content\" ui-view=\"\" class=\"md-padding\" layout=\"column\"></md-content>\r\n \r\n <!--<md-content flex id=\"content\"></md-content>-->\r\n\r\n</div>"
Using unminified HTML
And produces the following output in the browser when visiting "/dashboard":
module.exports = "
\r\n\r\n
\r\n\r\n Dashboard!\r\n \r\n\r\n \r\n\r\n\r\n \r\n
\r\n \r\n \r\n\r\n
"
Now there are a couple of odd things happening here. Why is it trying to parse the HTML? Getting rid of the directives get ride of the parsing error, but I still have the issue of seeing module.export="..." for my output instead of seeing the template.
Here is the contents of index.html
<div class="clearfix"></div>
<div flex layout="row" class="dashboard">
Dashboard!
<ng-include src="'nav-sidebar.html'"></ng-include>
<md-content id="dashboard-content" ui-view="" class="md-padding" layout="column"></md-content>
</div>

The issue is that I had the raw html loader specified in my webpack.config.js file. I had that specifying the loader in the call to require() would over-ride any settings I had specified in the webpack file and this is not the case. Fixing this also removed the parsing error warnings.

Meteor showing [object Object] after creating Meteor.Router.add()

I'm following this tutorial to learn Meteor. After adding the first JS code, I'm getting [object Object] on my browser. I've followed everything as explained (except for some names that I have changed, but I haven't used any reserved words), but I cannot see anything else. This part is in the first 4 minutes. This is how my files look:
demonstration.js:
CalEvents = new Meteor.Collection('calevents');
Session.setDefault('editing_calevent', null);
Session.setDefault('showEditEvent', false);
Meteor.Router.add({
'/':'home',
'/calendar':'calendar'
})
calendar.html:
<template name="calendar">
<div id="calendar">
Hello world! Now at calendar.
</div>
</template>
home.html:
<template name="home">
<div class="hero-unit">
<p>Manage your calendar</p>
<p><a class="btn btn-primary btn-large">Learn more</a></p>
</div>
</template>
demonstration.html:
<head>
<title>Calendar app</title>
</head>
<body>
{{>menu}}
<div class="container-fluid">
<div class="row-fluid">
{{renderPage}}
</div>
</div>
</body>
I suspect it has something to do with the Meteor.Router.add() line, because the little I did prior to adding this worked. I have tried changing the page to show on '/' to other pages that contained a simple text, but it didn't work.
Edit to add: I am working thru Nitrous.io and I installed Meteorite prior to adding the router package.
Thanks in advance.
PS: I have searched in here and on Google but I haven't been able to find any answer to this question. If there is one, kindly point me to the right address.

Lots of examples that use Meteor prior to version 0.8 will not work, so make sure you check out a recently updated example, like those on Discover Meteor.
In this case, router has been fixed to support Meteor 0.8 and your example will work by replacing {{renderPage}} with {{> renderPage}}. However, the rest of the example probably won't work, and as others have mentioned, router has been deprecated for Iron Router.