Istance de variable avec VueJS et Node-RED

Je développe une application simple avec Node-RED, VueJS et Waton API. J'ai écrit le code suivant dans un flux câblé à HTTP OUTPUT. Les problèmes commencent lorsque j'essaie de visualiser la page Web. Le changement de message d'indice, le message de question no. Pourquoi je n'arrive pas à voir les questions?Istance de variable avec VueJS et Node-RED

Peut-être est-il un problème de portée?

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>Find Funds</title> 

    <!-- Include VueJS Framework --> 
    <script src="https://unpkg.com/vue"></script> 

    <!-- Include VueJS Resource --> 
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> 

    <!-- Include W3.CSS Framework --> 
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 

    <!-- Include Google Icon --> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
</head> 

<body class="w3-cyan"> 
    <div id="app" class="w3-contenitor w3-round w3-white w3-display-middle"> 
    <span clas="w3-row"> 
     <h1 class="w3-margin w3-threequarter">{{getQuestion()}}</h1> 
    </span> 
    <span class="w3-row"> 
     <form> 
     <input type="text" class="w3-margin" v-model="currentAnswer"> 
     <i class="material-icons w3-margin" v-on:click="addAnswer()">send</i> 
     <i class="material-icons w3-margin" v-bind:title="getHint()">help_outline</i> 
     </form> 
    </span> 
    </div> 

<script id="jsbin-javascript"> 
var app = new Vue({ 
    el: '#app', 
    data: { 
    count: 0, 
    questions: ["first", "second", "third", "fourth", "fifth"], 
    hints: ["first hint", "second hint", "third hint", "fourth hint", "fifth hint"], 
    answers: [], 
    currentAnswer: "" 
    }, 
    methods: { 
    getQuestion: function(){ 
     return this.questions[this.count]; 
    }, 
    getHint: function(){ 
     return this.hints[this.count]; 
    }, 
    addAnswer: function(){ 
     this.answers.push(this.currentAnswer); 
     this.count++; 
     this.currentAnswer = ""; 

     if(this.count >= this.questions.length){ 
     // some code 
     } 
    } 
    } 
}) 
</script> 
</body> 
</html>

Source

2017-08-17 Ciro Mazzocchi

semble correct, êtes-vous sûr qu'il n'y a pas d'autre cadre dans votre configuration interfère avec vue.js? chose la plus simple serait de mettre un débogueur dans la méthode getQuestion() et voir ce qui se passe exactement – phoet

J'ai essayé le fichier html sur PC, et le code fonctionne.J'ai ce problème lorsque je mets le code dans le flux. –

Vos messages 'console.log' sont en train de casser des choses parce que vous avez omis' this' d'après les noms des variables. –

Je ne pense pas qu'il y ait quelque chose de mal avec votre code tel que présenté à l'exception de l'omission d'inclure this sur les variables dans vos console.log déclarations.

var app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    count: 0, 
 
    questions: ["first", "second", "third", "fourth", "fifth"], 
 
    hints: ["first hint", "second hint", "third hint", "fourth hint", "fifth hint"], 
 
    answers: [], 
 
    currentAnswer: "" 
 
    }, 
 
    methods: { 
 
    getQuestion: function(){ 
 
     return this.questions[this.count]; 
 
    }, 
 
    getHint: function(){ 
 
     return this.hints[this.count]; 
 
    }, 
 
    addAnswer: function(){ 
 
     this.answers.splice(this.count, 1, this.currentAnswer); 
 
     this.count++; 
 
     if(this.count >= this.questions.length){ 
 
     // some code 
 
     this.count = 0; 
 
     } 
 
     this.currentAnswer = this.answers[this.count]; 
 

 
    } 
 
    } 
 
})

<!-- Include VueJS Framework --> 
 
<script src="https://unpkg.com/vue"></script> 
 

 
<!-- Include VueJS Resource --> 
 
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> 
 

 
<!-- Include W3.CSS Framework --> 
 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
 

 
<!-- Include Google Icon --> 
 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 

 
<div id="app" class="w3-contenitor w3-round w3-white w3-display-middle"> 
 
    <span clas="w3-row"> 
 
     <h1 class="w3-margin w3-threequarter">{{getQuestion()}}</h1> 
 
     <small>{{getHint()}}</small> 
 
    </span> 
 
    <span class="w3-row"> 
 
     <form> 
 
     <input type="text" class="w3-margin" v-model="currentAnswer"> 
 
     <i class="material-icons w3-margin" v-on:click="addAnswer()">send</i> 
 
     <i class="material-icons w3-margin" v-bind:title="getHint()">help_outline</i> 
 
     </form> 
 
    </span> 
 
    <div v-for="a, i in answers">{{i}}. {{a}}</div> 
 
</div>

Source

2017-08-17 16:07:45

En utilisant la console et le flux de débogage de NodeRED, je suis sûr que le code fonctionne. Le seul problème est {{getQuestion()}} Je ne vois pas la question. Ceci est mon application https://find-funds.eu-gb.mybluemix.net/app. –

Votre application ne met rien dans le 'h1'. Je peux seulement dire que ce n'est pas dû à quoi que ce soit que vous avez posté ici. Essayez de mettre quelque chose comme "Some constant" au lieu de "getQuestion()" dans les parenthèses et voir si vous obtenez quelque chose. –

Istance de variable avec VueJS et Node-RED

Répondre

Questions connexes