Question

在尝试Vue和Vuex时，我偶然发现了以下错误消息：

[Vue warn]: Property or method "msg" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

我无法理解并解决此问题，主要是因为在msg下的代码中定义了data。它可能与Vuex没有直接关系，但只有在我开始使用Vuex时才会遇到它。

这是我的代码：

main.js：

import Vue from 'vue'
import App from './App.vue'
import { store } from './store.js'

Vue.component('app',  App);

var vApp = new Vue({
  el: '#app',
  store,
  render: h => h(App),
})

App.vue：

<template>
  <div id="app">
    <div v-text="msg"></div>
    <input id="name-b" class="input" v-model="nameB" type="text" placeholder="Name B">
  </div>
</template>

<script type = "text/javascript">
  module.exports = {
    name: 'app',
    data() {
      return {
        msg: 'boooo'
      }
    },
computed: {
  return {
    nameB: {
      get() {
          this.$store.state.nameB
        },
        set(value) {
          this.$store.commit('setName', value);
        }
    },
  } 
</script>

<style>
</style>

store.js：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    nameB: '',
  },
  mutations: {
    setName: function(state, name) { state.locationName = name},
  },
});

感谢。

Answer 1

问题解决了。这是一个大括号问题，可能return中的computed不需要......

这是一个令人困惑的错误消息。

财产或方法＆＃34; msg＆＃34;未在实例上定义，但在呈现期间引用

1 个答案: