Question

我正在使用Node-RED，VueJS和Waton API开发一个简单的应用程序。我在连接到HTTP OUTPUT的流程中编写了以下代码。当我尝试可视化网页时，问题就出现了。提示消息更改，问题消息编号

为什么我看不到问题？

可能是范围问题？

<!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/vue-resource@1.3.4"></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>

Answer 1

我认为除了未在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]; } } })之外，您所呈现的代码有任何问题。

＆＃13;

<!-- Include VueJS Framework -->
<script src="https://unpkg.com/vue"></script>

<!-- Include VueJS Resource -->
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></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>

＆＃13;

{{1}}

＆＃13;

VueJS和Node-RED的变量的Istance

1 个答案: