Question

我试图计算data.items中“ classtext”每个值出现的次数

但是，通过在下面添加一个函数来为单击按钮时每个新输入的类文本执行此操作，即使我先前在类文本字段中输入了多个“测试”，我也会得到0。我在vuejs中非常陌生，因此显然我做错了事。

代码如下：

<!DOCTYPE html>
<html>
<script src="https://vuejs.org/js/vue.js"></script>
<style>
/* Vue List Item transition */
.list-item-enter-active,
.list-item-leave-active {
  transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
  transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.list-item-enter,
.list-item-leave-to {
  opacity: 0;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}
/* //////////////////////////////////////// */
/* Basic Styles */
html {
  background: #eee;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.list {
  background: #FFF;
  margin: auto;
  padding: 1em 1em 1em;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
}
.list :last-child {
  margin-bottom: 0;
}
.list__ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.list__input {
  display: flex;
  margin-bottom: 0.5em;
}
.list__item {
  display: block;
  margin-bottom: 0.25em;
}

</style>
</head>

<body>
  <div id="example-1" class="list">

  <div class="list__input" @keydown.enter="add">
    <button v-on:click="count">+</button>
    <input v-model="newBeneficiary" placeholder="Add beneficiary"  />
    <input v-model="newClass" placeholder="Add new task topic" />
    <input v-model="newItem" placeholder="Add new task text"  />
  </div>

  <transition-group name="list-item" tag="ul" class="list__ul">
    <li class="list__item" v-for="item in items" :key="item">
      Timestamp: {{ item.timestamp }} <br />
      Beneficiary: {{ item.beneficiarytext }} <br />
      Topic: {{ item.classtext }} <br />
      Task: {{ item.message }}
    </li>
  </transition-group>

</div>
</body>
<script>
/**
 * Return a timestamp with the format "m/d/yy h:MM:ss TT"
 * @type {Date}
 */

function timeStamp() {
  var now = new Date();
  var date = [ now.getMonth() + 1, now.getDate(), now.getFullYear() ];
  var time = [ now.getHours(), now.getMinutes(), now.getSeconds() ];
  var suffix = ( time[0] < 12 ) ? "AM" : "PM";
  time[0] = ( time[0] < 12 ) ? time[0] : time[0] - 12;
  time[0] = time[0] || 12;
  for ( var i = 1; i < 3; i++ ) {
    if ( time[i] < 10 ) {
      time[i] = "0" + time[i];
    }
  }
  return date.join("/") + " " + time.join(":") + " " + suffix;
}

var app = new Vue({
  el: '#example-1',
  data: {
    items: [
      /*{ timestamp:'testdate', beneficiarytext: 'TestBeneficiary', classtext: 'TestTopic', message: 'TestMessage' }*/
    ]
  },
  methods: {
    /* MIGHT BE USED LATER TO DELETE TASKS
    remove: function(item){
      this.items.splice( this.items.indexOf(item), 1 );
    },
    */
    add: function(){
      this.items.unshift({ timestamp: timeStamp(), beneficiarytext: this.newBeneficiary, classtext: this.newClass, message: this.newItem });
      this.newItem = '';
      console.log(this.items);
    },
    count: function() {
      var counting = this.items.reduce(function (n, class1) {
      return n + (class1.classtext == this.newClass);
    }, 0)}
  }
})
</script>
</body>

</html>

Answer 1

您没有将this绑定到reducer函数。使用

this.items.reduce((n, class1) => { ... })

或

this.items.reduce(function (n, class1) { ... }.bind(this))

请参见How does the “this” keyword work?。

计算数组中每个类文本的计数：

this.items.reduce((map, item) => {
  map.set(item.classtext, (map.get(item.classtext) || 0) + 1)
  return map
}, new Map())

// Returns Map of (classtext, count) pairs:
// {
//   apple => 2,
//   banana => 6,
// }

计算数据项中值出现的次数

1 个答案: