Question

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

2016-10-09

60821

javascript vue.js

我正在加载一个引用客户端 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？

Answer 1

您要确保 makeOffer 位于 methods 选项内（而该选项本身位于 data 选项之外）。目前，您将 methods 选项置于 data 选项内。此外，您无法使用 vm.publickey 记录 publickey ；相反，您应该使用 this.offer.publickey 。

Answer 2

好吧，我不确定我是否明白你想做什么，但我把事情联系在一起了……

这是一个有效的片段：

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>

Answer 3

其中一个可能的原因可能是，在声明 Vue 方法的 js 文件中存在类型或语法错误。因此，请仔细检查，例如：

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