javascript - Vue js: How to use a computed property to modify string and apply dynamically as CSS class - Stack Overflow

admin管理员组

文章数量:1418861

I am following a tutorial and I want to add a new feature where the surname of each candidate is added as a class. I got this to work inline but then I wanted to clean it up and rather call it as a function.

Working inline

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

The function textClass removes spaces and "Mr." from the string. I've tried adding this as a puted property but I don't know how to call it on 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 }
    ]
  },

  puted: {
    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;
      })
    }
  }
});

I am following a tutorial and I want to add a new feature where the surname of each candidate is added as a class. I got this to work inline but then I wanted to clean it up and rather call it as a function.

Working inline

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

The function textClass removes spaces and "Mr." from the string. I've tried adding this as a puted property but I don't know how to call it on 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 }
    ]
  },

  puted: {
    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;
      })
    }
  }
});

• javascript
• vue.js
• vuejs2

Share Improve this question Follow edited Dec 8, 2016 at 1:37 Saurabh 73.7k4444 gold badges191191 silver badges251251 bronze badges asked Dec 8, 2016 at 1:21 Clinton GreenClinton Green 9,9872323 gold badges7272 silver badges109109 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

There are few mistakes in your code, one is dynamic class binding in vue takes a hash object, not an string. So you have to return an hash like this : { active: true } from the puted property.

Second thing is puted property in vue always modify another vue propery or values returned from an mehtod, to correct these you need to make following changes:

You have to use this.mayor.name in puted property to calculate dynamic class like this:

  puted: {
    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
    }
  },

and apply like this in HTML:

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

本文标签：