I have a good grasp on what the issue is (the inputs I'm trying to v-model aren't declared), but for some reason, I can't resolve it (or figure out how to) even after studying other posts with the same problem.
After comparing my code with the tutorial's I was following, I couldn't identify any differences that would lead to this specific error.
In Index.js, I've set up the following:
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify);
import VueResource from 'vue-resource';
Vue.use(VueResource);
// GITHUBAPI
import GitHubAPI from 'vue-github-api';
Vue.use(GitHubAPI, {token: 'user Personal Access Token'});
import 'bootstrap/dist/css/bootstrap.css';
import GitIssuesAndMiles from './app/IssuesAndMilestones.vue';
import './index.scss';
import 'vuetify/dist/vuetify.min.css';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
components: {
data: {
},
default: GitIssuesAndMiles
}
}
]
});
export default new Vue({
el: '#root',
data: {
},
router,
render: h => h('router-view')
});
Now, moving on to IssuesAndMilestones.vue:
<template>
<v-container id="app">
<v-layout align-center justify-space-around fill-height/>
<v-flex xs12 text-xs-center>
<h1>Vue/GitHub</h1>
</v-flex>
<!-- Area for user inputting GitHub information -->
<v-flex v-flex xs4 offset-xs4>
<input
v-model="_usernameVMod"
type="text"
class="form-control"
placeholder="Username">
<input
v-model="_repoVMod"
type="text"
class="form-control"
placeholder="Repository">
</v-flex>
<v-flex xs4 offset-xs4 row justify-center>
<v-btn large color="green lighten-2">Search</v-btn>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
export default{
data(){
return{
_usernameVMod: '',
_repoVMod: '',
};
},
methods:{},
};
</script>