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

推荐答案

您需要确保makeOffer位于methods选项内(该选项本身位于data选项外).现在,数据选项中有方法选项.此外,您不能使用vm.publickey记录publickey;相反,你应该使用this.offer.publickey.

Vue.js相关问答推荐

将Vite Vuejs应用部署到Apache服务器

如何在Vue 3中将动态特性从主零部件同步到子零部件

在vuejs中使用表单追加时如何使用布尔值

在 v-for 中定义变量有什么问题吗?

Rails Webpacker 还是 Vue-CLI?

如何只查看数组中的一个对象?

如何在异步功能上使用 debounce?

在按键 vuejs 中只允许数字和一个小数点后 2 位限制

如何将 axios/axios 拦截器全局附加到 Nuxt?

全局方法和实例方法有什么区别?

如何使用 vue.js 获取所选选项的索引

从我的服务访问路由实例

安装后运行computed计算函数

如何避免在 Vue 中一直写 this.$store.state.donkey 的需要?

如何在 Vue.js 应用程序中正确下载 Excel 文件?

执行调度程序刷新期间未处理的错误,这可能是一个 Vue 内部错误

将登录页面包含在单页应用程序中是否不安全?

IOS在输入焦点上显示键盘

Vue Router beforeRouteLeave 不会停止子组件

表格行上的 Vuejs 转换