Vue js：計算されたプロパティを使用して文字列を修正し、CSSクラスとして動的に適用する方法

Question

私はチュートリアルに従っており、各候補の姓がクラスとして追加される新しい機能を追加します。私はこれをインラインで動かすことにしましたが、私はそれをきれいにして、機能として呼びたいと思っていました。

作業をインライン

mayor.name.replace(/ /g,'').replace('Mr.','').toLowerCase() 

機能textClassは、スペースや "ミスター" を削除します文字列から。私は計算されたプロパティとしてこれを追加しようとしましたが、私はmayor.name

CSS

.black{ color: black;} 
.brown{ color: brown;} 
.pink{ color: pink;} 
.red{ color: red;} 

HTML上でそれを呼び出す方法がわからない

<div class="container"> 

    <div id="mayor-vote"> 
    <h2>Mayor Vote</h2> 
    <ul class="list-group" style="width: 400px;"> 
     <li v-for="candidate in candidates" class="list-group-item clearfix"> 
     <div class="pull-left"> 
      <strong style="display: inline-block; width: 100px;">{{ candidate.name }}:</strong> {{ candidate.votes }} 
     </div> 
     <button class="btn btn-sm btn-primary pull-right" @click="candidate.votes++">Vote</button> 
     </li> 
    </ul> 
    <h2>Our Mayor is <span class="the-winner" :class="mayor.name.textClass">{{ mayor.name }}</span></h2> 
    <button @click="clear" class="btn btn-default">Reset Votes</button> 
    </div> 

</div> 
</body> 

JS

new Vue({ 

    el: '#mayor-vote', 

    data: { 
    candidates: [ 
     { name: "Mr. Black", votes: 140 }, 
     { name: "Mr. Red", votes: 135 }, 
     { name: "Mr. Pink", votes: 145 }, 
     { name: "Mr. Brown", votes: 140 } 
    ] 
    }, 

    computed: { 
    mayor: function(){ 
     var candidateSorted = this.candidates.sort(function(a,b){ 
     return b.votes - a.votes; 
     }); 
     return candidateSorted[0]; 
    }, 
    textClass: function() { 
     return this.replace(/ /g,'').replace('Mr.','').toLowerCase(); 
    } 
    }, 

    methods: { 
    clear: function() { 
     this.candidates = this.candidates.map(function(candidate){ 
     candidate.votes = 0; 
     return candidate; 
     }) 
    } 
    } 
}); 

Answer 1

あなたのコードには間違いがほとんどなく、1つはdynamic class bindingのvueで、文字列ではなくハッシュオブジェクトを取ります。だから、計算されたプロパティから{ active: true }のようにハッシュを返さなければなりません。

をあなたはこのような動的なクラスを計算するために計算されたプロパティでthis.mayor.nameを使用する必要があります。

2つ目は、常に次のような変更を加える必要があり、これらを修正するために、mehtodから返された別のVUEのproperyまたは値を変更VUEでcomputed propertyです：

computed: { 
    mayor: function(){ 
     var candidateSorted = this.candidates.sort(function(a,b){ 
     return b.votes - a.votes; 
     }); 
     return candidateSorted[0]; 
    }, 
    textClass: function() { 
     var tmp = {} 
     tmp[this.mayor.name.replace(/ /g,'').replace('Mr.','').toLowerCase()] = true 
     return tmp 
    } 
    }, 

とHTMLで次のように適用されます。素晴らしい作品

<h2>Our Mayor is <span class="the-winner" :class="textClass">{{ mayor.name }}</span></h2>