Question

我正在努力寻找一种方法，可以将Map（）对象的内容从countall（）方法返回到数据中，以便在模板中动态显示它们。

似乎我受Vue方法的限制，因为不可能在方法中的一个VueJS函数下运行多个非嵌套函数。

目前，我的代码如下：

<!DOCTYPE html>
<html>

<head>
<script src="https://npmcdn.com/vue/dist/vue.js"></script>

</head>

<body>
  <div id="example-1">
  <div class="list__input" @keydown.enter="add">
  <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>
  <div class="list__item" v-for="item in items" :key="item">
    {{ item.beneficiarytext }} {{ item.classtext }} {{ item.message }}
    {{ countall() }}
  </div>
  </div>
</body>
<script>
var app = new Vue({
  el: '#example-1',
  data: {
    items: [
      {
        beneficiarytext: '',
        classtext: '',
        message: ''
      }
    ]
  },
  methods: {
    add: function(){
      this.items.unshift({beneficiarytext: this.newBeneficiary, classtext: this.newClass, message: this.newItem });
      this.newItem = '';
      console.log(this.items);
    },
    countall: function() {
        this.items.reduce((map, item) => {
          map.set(item.classtext, (map.get(item.classtext) || 0) + 1)
          return map
        }, new Map());
      }
  }
})
</script>
</body>

</html>

vuejs将map（）对象的内容返回到数据中

0 个答案: