VueJS和Node-RED變量的實例

我正在開發一個Node-RED，VueJS和Waton API的簡單應用程序。我在連接到HTTP OUTPUT的流程中編寫了以下代碼。當我嘗試將網頁可視化時，問題就開始了。提示信息更改，問題信息號碼。VueJS和Node-RED變量的實例

爲什麼我看不到問題？

也許是範圍問題？

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

來源

2017-08-17 Ciro Mazzocchi

看起來不錯，你肯定有一個在您安裝任何其他的框架與vue.js干擾？最簡單的事情是將調試器放在getQuestion（）方法中，看看究竟發生了什麼 – phoet

我在PC上試過文件html，並且代碼工作正常。當我將代碼放入流中時，出現此問題。 –

您的'console.log'消息正在破壞，因爲您從變量名稱中刪除了'this'。 –

我不認爲作爲提出除了未能包括的變量this在console.log報表有什麼你的代碼錯誤。

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>

來源

2017-08-17 16:07:45

使用控制檯和NodeRED的調試流程，我確信代碼有效。唯一的問題是{{getQuestion（）}}我看不到問題。這是我的應用程序https://find-funds.eu-gb.mybluemix.net/app。 –

你的應用沒有在「h1」中放置任何東西。我只能說這不是因爲你在這裏發佈的任何內容。嘗試在括號中加入''Some constant''而不是'getQuestion（）'，看看你是否有任何東西。 –

VueJS和Node-RED變量的實例

回答

相關問題