Counter для textarea?

Question

Есть проблема которая состоит и том как добавить счетчик для расчета символов в message

new Vue({
  el: '.editable-text',
  prop: ['type'],
  template: `
    <div v-if="!editing">
      <span class='text' @click="enableEditing">{{value}}</span>
    </div>
    <div v-if="editing">
      <input v-model="tempValue" class="input"/>
      <button @click="disableEditing"> Cancel </button>
      <button @click="saveEdit"> Save </button>
<div >{{counter}}</div>
    </div>
  `,
  data: {
    value: '...',
    tempValue: null,
    editing: false,
    counter: 0
  },
  methods: {
    counterCount() {
      this.counter=this.message.length;
    },
    enableEditing: function(){
      this.tempValue = this.value;
      this.editing = true;
    },
    disableEditing: function(){
      this.tempValue = null;
      this.editing = false;
    },
    saveEdit: function(){
      this.value = this.tempValue;
      this.disableEditing();
    }
  }
})

<div class="editable-text">
  {{message}}
  <p>counter {{counterCount()}}</p>
</div>

Answer 1

Не совсем понял почему у вас два каких-то счетчика, ну вроде ваш код заработал: Как вам и советовал #Дмитрык для подсчета количества символов можно использовать computed.

Вот пример вашего рабочего кода:

new Vue({
  el: '.editable-text',
  prop: ['type'],
  template: `
  <div>
    <div v-if="!editing">
      <span class='text' @click="enableEditing">{{value}}</span>
    </div>
    <div v-if="editing">
      <input v-model="tempValue" class="input"/>
      <button @click="disableEditing"> Cancel </button>
      <button @click="saveEdit"> Save </button>
<div >{{counter}}</div>
    </div>
    </div>
  `,
  computed: {
    counter() {
      return this.tempValue.length;
    },
  },
  data: {
    value: 'тык...',
    tempValue: null,
    editing: false
  },
  methods: {
    enableEditing: function(){
      this.tempValue = this.value;
      this.editing = true;
    },
    disableEditing: function(){
      this.tempValue = null;
      this.editing = false;
    },
    saveEdit: function(){
      this.value = this.tempValue;
      this.disableEditing();
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div class="editable-text">
  {{message}}
  {{ tempValue }}
  <p>counter {{ counterCount }}</p>
</div>

И вот пример как можно это реализовать:

new Vue({
  el: '#app',
  components: {
    MessageComponent: {
      props: ['item'],
      data() {
        return {
          temp: null,
          editing: false
        }
      },
      computed: {
        counter() {
          return this.temp.text.length || 0;
        }
      },
      template: `
        <div>
          <div v-if="!editing">
            <span class='text'>{{item.text}}</span>
            <button @click="enableEditing"> Изменить </button>
          </div>
          <div v-if="editing">
            <input v-model="temp.text" class="input"/>
            <span>{{counter}}</span>
            <button @click="disableEditing"> Отменить </button>
            <button @click="saveEdit"> Сохранить </button>
          </div>
        </div>
      `,
      methods: {
        enableEditing: function() {
          this.temp = Object.assign({}, this.item)
          this.editing = true;
        },
        disableEditing: function() {
          this.temp = null;
          this.editing = false;
        },
        saveEdit: function() {
          this.item.text = this.temp.text;
          this.disableEditing();
        }
      }
    }
  },
  data: {
    messages: [{
        id: 0,
        text: 'Тестовая запись'
      },
      {
        id: 1,
        text: 'Тестовый текст'
      }
    ]
  },
  computed: {
    counterMessages() {
      return this.messages.length || 0;
    }
  },
  methods: {
    addItem() {
      this.messages.push({
        id: this.messages.length,
        text: 'Новая запись'
      })
    }
  }
})

.row {
  display: flex;
}

.col {
  width: 50%;
}

.box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.box>div {
  background: #f1f1f1;
  padding: 5px;
  margin: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <div class="row">
    <div class="col">
      <div class="box">
        <template v-for="item in messages">
          <message-component :item="item" />
        </template>
      </div>
      <div>
        Всего записей - {{ counterMessages }}
        <button @click="addItem">add new</button>
      </div>
    </div>
    <div class="col">
      <pre>
{{ messages }}
        </pre>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Counter для textarea?

Ответы (1 шт):