Question

我正在努力创建一个类似Twitter的＆＃34;使用Vuejs的字符计数器;但是，我遇到了两个不同的问题。

错误：无法获得属性＆＃39;长度＆＃39;未定义或空引用
即使我让它工作，有没有办法使用多个事件调用相同的函数，而不是将每个事件作为单独的标记调用添加。例如：v-on：keyup，blur，focus =＆＃34; limiter（this，140）＆＃34;

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 - 这是整个＆＃34; reactivity system＆＃34;

但是这里有一些建议来解决你的问题：

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

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

v-model

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

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

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

Vuejs：角色计数器

1 个答案: