vuejs 2

Question

問題：https://codepen.io/ookangzheng/pen/MoEgME?editors=1011

var getColor = document.getElementById("#inputColor").value; 
 
new Vue({ 
 
    el: '#drawing', 
 
    data: { 
 
    color:"red", 
 
    a: 50, 
 
    b: 95, 
 
    c: 5, 
 
    }, 
 
    methods:{ 
 
    update: function(inputColor){ 
 
     
 
     //getColor.value="blue"; 
 
     this.color = inputColor; 
 
     console.log("update pressed + inputColor"); 
 
     return this.a, this.b, this.c; 
 
    }, 
 
    changeColor(){ 
 
     
 
    } 
 
    }, 
 

：私はSVGの三角形を調整し、ユーザの入力ここ

は、コードペンリンクで色を取得するために、3種類の範囲を使用したいです

Answer 1

私はこれがあなたのためにトリックを行う必要がありますね。

<div id="drawing"> 
    <input v-model="a" type="range" /> A: {{a}} <br> 
    <input v-model="b" type="range" /> B: {{b}}<br> 
    <input v-model="c" type="range" /> C: {{c}}<br> 
    <input type="text" v-model="color" id="inputColor"/> 
    <svg class="svg-triangle" width='100' height='100'> 
    <path :d="result" v-bind:class="color"/> 
    </svg> 
    <p> 
     <ul> 
      <li>red</li> 
      <li>blue</li> 
      <li>green</li> 
     </ul> 
    </p> 
    <button v-on:click="update">update</button> 
    </div> 

あなたのjavascriptのコードをに簡素化することができます。https://jsbin.com/mevehipoce/edit?html,js,output

：フィドルをチェック

new Vue({ 
    el: '#drawing', 
    data: { 
    color:"red", 
    a: 50, 
    b: 95, 
    c: 5, 
    result: '' 
    }, 
    methods:{ 
    update: function(){ 
     this.result = `M ${a}, 6 ${b}, 97.5 ${c}, 97.5 z` 
    } 
    } 
})