vue.js - 未在实例上定义，但在渲染期间引用

Posted 2023-02-23

技术标签:

【中文标题】vue.js - 未在实例上定义，但在渲染期间引用【英文标题】：vue.js - not defined on the instance but referenced during render 【发布时间】：2017-02-17 17:38:19 【问题描述】：

我正在加载一个模板，该模板使用我的代码引用客户端 js 文件，如下所示：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.js"></script>
  <link rel="stylesheet" type="text/css" href="../css/app.css">

</head>
<body>
<div id="container">
  <div id="map">
    <script src="../js/app.js" type="text/javascript"></script>    
  <div id="offer-details">
    <form id="offer-form" v-on:submit="makeOffer(tags, description, code)">  
      <input id="description"/>
      <input id="tags"/>
      <input id="code"/>
      <input type="submit"/>
    </form>
  </div>
  </div>
</div>

</body>

</html>

我的浏览器显示以下（details.js）加载成功。

var vm = new Vue(
    el: "#details",
    data: 
    offer: 
            publickey: '',
            privatekey: '',          
            name: '',
            service: '',
            value: '',
            currency: '',
            tags: '',
            description: '',
            code: ''
    ,             
    methods: 
        makeOffer: function makeOffer()console.log(vm.publickey)

    
       
)

但是，当我提交表单时，我收到以下错误消息：

[Vue warn]: Property or method "makeOffer" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)vue.js:2574:7

[Vue warn]: Handler for event "submit" is undefined.

在我看来，我应该在方法键中定义 makeOffer。这与在实例上定义它不一样吗？为什么没有看到 makeOffer？

【问题讨论】：

你的项目结构是什么样的？我收到此错误是因为我的组件文件中没有关闭 </script> 标记 【参考方案1】：

其中一个可能的原因可能是声明了Vue 方法的js 文件中的类型或语法错误。所以，也要仔细检查一下，比如：

var app= new Vue(
  ....
  methods: 
    platform_click: function (event) 
      Alert("hi"):     // typo error or ; missing
    
  
  ...
);

【讨论】：

【参考方案2】：

您要确保makeOffer 在方法选项内（它本身在数据选项之外）。现在，您在 data 选项中有方法选项。此外，您不能使用vm.publickey 记录publickey；相反，您应该使用this.offer.publickey。

【讨论】：

感谢您发现这一点，这似乎是问题所在，因为不再有错误。但是，我的 makeOffer 函数似乎仍然无法正常工作，因为控制台中没有记录任何内容。【参考方案3】：

好吧，我不确定我是否理解你想要做什么，但我将事情绑定在一起......

这是一个有效的 sn-p：

  var vm = new Vue(
el: "#details",
data: 
  offer: 
      publickey: '',
      privatekey: '',          
      name: '',
      service: '',
      value: '',
      currency: '',
      tags: '',
      description: '',
      code: ''
    
,             
methods: 
  makeOffer() 
    console.log(this.offer)
  

  );

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="container">
  <div id="map">  
<div id="details">
  <form id="offer-form" v-on:submit="makeOffer">  
    <input v-model="offer.description" />
    <input v-model="offer.tags" />
    <input v-model="offer.code"/>
    <input type="submit"/>
  </form>
</div>
  </div>
</div>

【讨论】：

我正在尝试在表单提交时调用 makeOffer 方法。由于我提到的错误消息，这仍然不允许我这样做。上面的代码sn-p在提交时调用了makeoffer函数，没有错误谢谢，我错过了您在数据之外定义方法的事实，这就是问题所在。我正在使用您粘贴的代码，并且没有任何错误，但 console.log 命令不会将任何内容记录到控制台 - 即使它在代码 sn-p 上记录。

以上是关于vue.js - 未在实例上定义，但在渲染期间引用的主要内容，如果未能解决你的问题，请参考以下文章

Vue js错误：属性或方法“smoothie”未在实例上定义，但在渲染期间引用

Vue.js：属性或方法未在实例上定义，但在渲染期间引用

Vue.js - 属性或方法“blah”未在实例上定义，但在渲染期间引用

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

Vue.js 属性或方法“选项”未在实例上定义，但在渲染期间被引用

错误：vue.js:634 [Vue 警告]：属性或方法“项目”未在实例上定义，但在渲染期间被引用