属性或方法“msg”未在实例上定义，但在渲染期间被引用

Posted 2023-02-23

【中文标题】属性或方法“msg”未在实例上定义，但在渲染期间被引用

【英文标题】：Property or method "msg" is not defined on the instance but referenced during render

【发布时间】：2018-05-07 03:45:07

【问题描述】：

在尝试 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,
  ,
);

谢谢。

【参考方案1】：

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

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