Vuejs:角色计数器

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 - 这是整个" 反应系统 " 背后的关键概念

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

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

您可以创建计算属性,以根据该属性计算剩余字符.

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

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

然后在您的标记中,您将使用计算属性,如常规数据属性:

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