vue.js - 實例上沒有定義，而引用的渲染

我加載的是我的代碼，像這樣引用了客戶端的js文件的模板中：vue.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>

我的瀏覽器顯示以下內容（詳細信息。 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？

來源

2016-10-09 David J.

你的項目結構是什麼樣的？ –

我得到這個錯誤，因爲我沒有關閉我的組件文件中的''標記 –

你想以確保makeOffer位於方法選項內部（它本身不在數據選項中）。現在你在data選項中有方法選項。另外，您不能使用vm.publickey登錄publickey;相反，你應該使用this.offer.publickey。

來源

2016-10-09 05:07:30

感謝您發現，這似乎是問題，因爲沒有更多的錯誤。但是，我的makeOffer函數似乎仍然沒有工作，因爲控制檯中沒有記錄任何內容。 –

好了，我不知道我理解你想要做什麼，但我綁定的東西放在一起...

這裏是一個工作片段：

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>

來源

2016-10-09 02:23:36

我試圖在表單提交時調用makeOffer方法。這仍然不能讓我這樣做，因爲我提到的錯誤消息。 –

上面的代碼片段調用makeoffer函數提交併且沒有錯誤 –

謝謝，我錯過了你有數據之外定義的方法的事實，那就是問題所在。 –

vue.js - 實例上沒有定義，而引用的渲染

回答

相關問題