VueJSとNode-REDを使った変数の考え方

Node-RED、VueJS、Waton APIを使って簡単なアプリケーションを開発しています。 HTTP OUTPUTに接続されたフローに次のコードを書きました。 Webページを視覚化しようとすると問題が発生します。ヒントメッセージが変更され、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

がOKに見えますが、あなたはvue.jsを妨害しているあなたのセットアップには、他のフレームワークが存在しないことを確認していますか？最も単純なことは、getQuestion（）メソッドにデバッガーを置き、正確に何が起こっているのかを確認することです。 – phoet

私は、PC上でファイルhtmlを試してみました。そして、コードworks.Iは、 –

変数名から 'this'を削除したため、' console.log'メッセージが壊れています。 –

あなたconsole.log文で変数にthisを含むように失敗を除いて提示され、私はあなたのコードに何か問題がないと思います。

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'に何も入れていません。私はあなたがここに投稿した何ものでもないと言うことができます。 'getQuestion（）'の代わりに ''Some constant''のようなものを括弧の中に入れて、何かが得られるかどうか調べてみてください。 –

VueJSとNode-REDを使った変数の考え方

答えて

関連する問題