У меня проблема с Вью. На этом этапе я прочитал такие вещи, как this , подробно описывающие эту ошибку, возникающую при попытке определить метод в корневом экземпляре, а затем ссылаться на него в локальной области.
Моя проблема немного отличается, потому что она определена в локальной области, поэтому я не уверен, что делать с этой ошибкой. Я также посмотрел на это и это .
Вот мое приложение.
<template>
<div id="app">
<router-link to="/Home">home</router-link>
<router-link to="/Login">login</router-link>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
console.log('app.vue loading')
</script>
Мой main.js:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import store from './store'
import router from './router'
import Home from './components/Home'
import Login from './components/Login'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App, Home, Login },
template: '<App/>'
})
console.log('main js loading');
Компонент, из которого исходит проблема:
<template>
<div class="login">
<head>
<title>{{title}}</title>
</head>
<form for="login" id="loginMain">
<label for="username">Username:</label>
<input type="text" id="username"></input>
<label for="password">Password:</label>
<input type="password"></input><br/><br/>
<button for="login" @click="processLogin">LOGIN</button>
<button for="logout" @click="processLogout">LOGOUT</button>
</form>
<p> Your login status: {{ loginStatus }} </login></p>
</div>
</template>
<script>
import Vue from 'vue'
import { mapGetters, mapActions, Vuex } from 'vuex'
import store from '@/store'
const Login = {
delimiters: [ '[{','}]'],
data () {
title: 'Foo',
msg: 'Bar'
}
name: 'Login',
props: {
// worry about this later
},
methods: {
...mapActions({
processLogin : 'LOGIN_ACTION',
processLogout : 'LOGOUT_ACTION'
})
},
computed: {
...mapGetters({
title: 'GET_TITLE',
loginStatus: 'GET_LOGIN_STATUS'
}),
}
}
console.log('Login loading');
export default Login
И хотя я не уверен, связано ли это, но мой магазин:
import Vue from 'vue'
import Vuex from 'vuex'
import Home from './components/Home'
import Login from './components/Login'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
title: 'My Custom Title',
loggedIn: false
},
mutations: {
MUT_LOGIN: (state) => {
state.loggedIn = true
},
MUT_LOGOUT: (state) => {
state.loggedIn = false
}
},
actions: {
LOGIN_ACTION ({ commit }){
store.commit('MUT_LOGIN')
},
LOGOUT_ACTION ({ commit, state }) {
store.commit('MUT_LOGOUT')
}
},
getters: {
GET_LOGIN_STATUS: state => {
return state.loggedIn
},
GET_TITLE: state => {
return state.title
}
}
})
console.log('store loading');
export default store
Я знаю, что в какой-то момент у меня были некоторые из этих ошибок, и я избавился от них, пересмотрев каждый оператор импорта и внеся некоторые исправления в то, как я их подключил. Единственное другое различие между сейчас и в том, что я запускаю все эти файлы через Webpack и подаю их с Django в шаблоне. (Причина для всех консолей, чтобы убедиться, что все файлы попали туда через Webpack.)
Изображение ниже - пара специфических вещей, о которых он лает.
Из-за ссылки из ошибки devtools я посмотрел на this , а также экспериментировал с добавлением локальных свойств data () к самому компоненту.