web-dev-qa-db-fra.com

vue.js - non défini sur l'instance mais référencé lors du rendu

Je charge un modèle qui référence un fichier js côté client avec mon code comme suit:

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

Mon navigateur indique que le fichier suivant (details.js) est chargé avec succès. 

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

    }
    }   
})

Cependant, lorsque je soumets le formulaire, le message d'erreur suivant s'affiche:

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

Il me semble que je définis makeOffer dans la clé de méthode comme je le devrais. N'est-ce pas la même chose que de le définir sur l'instance? Pourquoi ne voit-il pas MakeOffer?

javascriptvue.js
11
David J.

Vous voulez vous assurer que makeOffer est à l'intérieur de l'option méthodes (ce qui est en dehors de l'option de données). À l'heure actuelle, vous avez l'option des méthodes à l'intérieur de l'option de données. De plus, vous ne pouvez pas vous connecter à la publickey en utilisant vm.publickey; à la place, vous devriez utiliser this.offer.publickey. 

12
Mahmud Adam

Eh bien, je ne suis pas sûr d'avoir compris ce que tu voulais faire, mais j'ai lié les choses entre elles…

Voici un extrait de travail: 

  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>

4
François Romain

Une des raisons possibles pourrait être, le type ou l'erreur de syntaxe dans le fichier js où les méthodes Vue sont déclarées. Alors, vérifiez bien cela aussi, comme:

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