vue.jsの平方根

Question

私はvue.jsアプリケーションを作成しようとしています。私は私の '結果'メソッドに問題があります - 入力に渡された数値を平方根にする必要があります。それを機能させるために私は何ができますか？

HTML：

<div id="app" class="container"> 
     <button class="root" @click="filter()">Root Extraction</button> 
    <template v-if="rootObject.squareRoot"> 
     <div class="rootBox"> 
     <h1>Type a random number to square root it!</h1> 
     <input id="number" type="number" min="0"/> 
     <button id="button" @click="results()" type="button">Count it</button> 
     <h1 id="result"></h1> 
     </div> 
    </template> 
    </div> 

のJS：だから、あなたの質問に簡単な答えは、あなたが "document.getByを..." を使用してはならないことvuejsである

var result = document.getElementById("result"); 
new Vue({ 
    el: '#app', 
    data: { 
    rootObject: { 
     squareRoot: false, 
    } 
    }, 
    methods: { 
    results: function() { 
     result.innerHTML = "Square rooted number is: " + Math.sqrt(document.getElementById("number").value); 
    }, 
    filter: function() { 
     this.rootObject.squareRoot = !this.rootObject.squareRoot; 
    } 
    } 
}) 

Answer 1

、それはファンキーにつながります結果。 VueJsビルトイン補間システムを使用すると、アプリケーションがリアクティブであることが保証されます。

ここにあなたのコードの作業バージョンhttps://jsfiddle.net/49gptnad/784/

とシオマネキがここにコードされている。 HTML

<div id="app" class="container"> 
    <button class="root" @click="toggleSquareRoot()">Root Extraction</button> 
    <template v-if="squareRootOpen"> 
    <div class="rootBox"> 
     <h1>Type a random number to square root it!</h1> 
     <input id="number" type="number" min="0"/> 
     <button id="button" @click="computeResults()" type="button">Count it</button> 
     <h1>{{results}}</h1> 
    </div> 
    </template> 
</div> 

JS

new Vue({ 
    el: '#app', 
    data: { 
    // no need for data to be nested 
    squareRootOpen: false, 
    results: "n/a" 
    }, 
    methods: { 
    // compute the output and store it in VueJs 
    computeResults: function() { 
     this.results = Math.sqrt(document.getElementById("number").value) 
    }, 
    toggleSquareRoot: function() { 
     this.squareRootOpen = !this.squareRootOpen; 
    } 
    } 
}) 

ので、いくつかの注意事項があなたのコード：

1. もっと冗長な名前付けスキームを使用してください。 "フィルタ"は実際にその関数が何をしているのかを記述していません。

2. 投稿する前に、ドキュメントをお読みください。 VueJsが実際に懸念のこの種をカバーする素晴らしい仕事をした：https://vuejs.org/v2/guide/syntax.html#Text

3. は、適切なHTML構文を学び、あなたは（それがあった余地を有していないと終了タグを必要としないで）

がかなりの数のタイプミスがありました