问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

我正在加载一个模板，该模板使用我的代码引用客户端 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？

原文由 David J. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptvue.js
阅读 802
2 个回答
得票最新
社区维基
1
✓ 已被采纳

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

原文由 Mahmud Adam 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

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

这是一个工作片段：

   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>

原文由 François Romain 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题