vue.js - không xác định trên sơ thẩm nhưng tham chiếu trong thời gian render

Tôi tải một mẫu tham chiếu đến tập tin một phía khách hàng js với mã của tôi như vậy:vue.js - không xác định trên sơ thẩm nhưng tham chiếu trong thời gian render

<!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>

Trình duyệt của tôi cho thấy như sau (chi tiết. js) tải thành công.

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)} 

    } 
    } 
})

Tuy nhiên, khi tôi gửi biểu mẫu tôi nhận được thông báo lỗi sau:

[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.

Có vẻ với tôi như tôi đang xác định makeOffer trong khóa phương pháp như tôi cần. Điều này không giống như xác định nó trên cá thể? Tại sao nó không nhìn thấy makeOffer?

Nguồn

2016-10-09 David J.

Cấu trúc dự án của bạn trông như thế nào? –

Tôi nhận được lỗi này vì tôi không đóng thẻ '' trong tệp thành phần –

Bạn muốn để đảm bảo makeOffer nằm trong tùy chọn phương thức (chính nó nằm ngoài tùy chọn dữ liệu). Ngay bây giờ bạn có tùy chọn phương thức bên trong tùy chọn dữ liệu. Ngoài ra, bạn không thể đăng nhập publickey bằng cách sử dụng vm.publickey; thay vào đó, bạn nên sử dụng this.offer.publickey.

Nguồn

2016-10-09 05:07:30

Cảm ơn bạn đã phát hiện ra rằng, đó dường như là vấn đề vì không có lỗi nào khác. Tuy nhiên, hàm makeOffer của tôi vẫn không hoạt động vì không có gì được đăng nhập trong giao diện điều khiển. –

Vâng, tôi không chắc là tôi hiểu những gì bạn muốn làm, nhưng tôi binded thứ với nhau ...

Dưới đây là một đoạn làm việc:

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>

Nguồn

2016-10-09 02:23:36

Tôi đang cố gắng gọi phương thức makeOffer khi biểu mẫu gửi. Điều này vẫn không cho phép tôi làm điều đó vì các thông báo lỗi tôi đã đề cập. –

đoạn mã ở trên gọi hàm makeoffer gửi và không có lỗi –

Cảm ơn bạn, tôi đã bỏ lỡ thực tế rằng bạn đã có các phương thức được xác định bên ngoài dữ liệu, đó là vấn đề. –

vue.js - không xác định trên sơ thẩm nhưng tham chiếu trong thời gian render

Trả lời

Các vấn đề liên quan