javascript - Vuejs : Character Counter

Question

我正在尝试使用 Vuejs 创建一个“类似 Twitter 的”字符计数器；但是，我遇到了两个不同的问题。

1. 错误:无法获取未定义或空引用的属性“长度”
2. 即使我让它工作，有没有什么方法可以使用多个事件调用同一个函数，而无需将每个事件添加为对标记的单独调用。例如:v-on:keyup,blur,focus="limiter(this,140)"

HTML:

<div class="form-group" id="vue">
  <label for="eligibility-address-detail">Address Notes:</label>
  <textarea class="form-control" id="eligibility-address-detail" rows="3" 
   name="eligibility[address][detail]" v-model="eligibility.address.details" 
   v-on:keyup="limiter(this, 140)" required></textarea>
  <span class="limiter"></span>
</div>

JavaScript:

var main = new Vue({
  el: "#vue",
  data: {
    eligibility: {
      address: {
        details: ""
      }
    }       
  },
  methods: {        
      limit: function(elem, limit){
          var chars = elem.value.length;
          if (chars > limit) {
              elem.value = elem.value.substr(0, limit);
              chars = limit;
          }
          $(elem).siblings('.limiter').html((limit - chars) + " / " + limit + "characters remaining");
      }
  }
});

Answer 1

一般来说，对于大多数现代前端框架(Angular、React、Vue 等)，您希望避免手动操作和检查 DOM。推荐的方法是让一切都由数据驱动(又名:使用模型)并让框架在需要时更新 DOM - 这是整个“reactivity system”背后的关键概念

但这里有一些建议可以解决您的问题:

不要在 DOM 事件上调用 limit() 方法。相反...查看绑定(bind)到输入 v-model 的 eligibility.address.details 属性。

您可以创建一个 computed property根据该属性计算剩余字符。

computed: {
    charactersLeft() {
        var char = this.eligibility.address.details.length,
            limit = 140;

        return (limit - char) + " / " + limit + "characters remaining";
      }
}

然后在您的标记中，您可以像使用常规数据属性一样使用计算属性:

<span class="limiter">{{charactersLeft}}</span>