是否有可能打造了显示数据绑定变量的一个实例？(Is it possible to create an

我的函数计算的输入范围内的字符数。 该功能用于对多个输入。 该功能跟踪字符数为每个单独的输入。 但是其余的字符不保留单独的轨道和任何字符到任何输入对的总数。 我如何可以单独显示剩余字符视野范围内的每个输入，仍然保持我的功能模块来处理它附加到任何输入？ 是否有可能有方法被调用每次变量的实例？

谢谢！

HTML
    <textarea 
        class="form-control" v-model="HighlightTitle" id="HighlightTitle" v-
        on:keyup="inputCheck">
    </textarea>

    <span>Character Count: {{ charactersRemaining }}</span>

    <textarea class="form-control" v-model="HighlightListing" 
              v-on:keyup="inputCheck" id="HighlightListing">
    </textarea>

    <span>Character Count: {{ charactersRemaining }}</span>     

Javascript

    inputCheck(element)  {

            var characterCount = element.target.value.length;
            var charactersRemaining = '';
            var maxCharacters = 500;

                charactersRemaining = maxCharacters - characterCount;

                this.charactersRemaining = charactersRemaining;

                    if(charactersRemaining < 0) {   
                         this.isOver500 = 1; 
                    }
                    else {
                        this.isOver500 = 0;
                    }
            },

Answer 1:

我可以提出一个组成部分？

Vue.component("counted-textarea", {
  props:["maxCharacters", "rows", "value"],
  template: `
    <div>
      <textarea v-model='taValue' :rows='rows' @input='$emit("input", taValue)'></textarea>
      <span :class="{overMax: isOverMax}">Character Count: {{ remaining }}</span>
    </div>`,
  data(){
    return {
      taValue: this.value
    }
  },
  computed:{
    isOverMax(){
      if (!this.taValue)
        return false;

      return (this.maxCharacters - this.taValue.length) < 0
    },
    remaining(){
      if (!this.taValue)
        return this.maxCharacters;

      return this.maxCharacters - this.taValue.length
    }
  }
})

使用这样的模板：

<counted-textarea 
             :max-characters="50"
             rows="5"
             v-model="myTextValue">
</counted-textarea>

实例 。

文章来源: Is it possible to create an instance of a variable that's being displayed with data binding?