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

【问题标题】：vue.js - not defined on the instance but referenced during rendervue.js - 未在实例上定义，但在渲染期间引用
【发布时间】：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> 标记

标签： javascript vue.js

【解决方案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 上记录。