Как разработать компонент– кнопку счётчик, значение которой увеличивается на 1 по клику?

Question

[Алексей]

Требуется разработать компонент CounterButton – кнопку счётчик, значение которой увеличивается на 1 по клику.

Единственный входной параметр компонента: count, значение счётчика (число, по умолчанию 0);
Компонент выводит кнопку с текущим значением счётчика;
При клике компонент порождает событие обновления параметра count директивой v-model со значением на 1 больше текущего

export default defineComponent({
  name: 'CounterButton',

  // Компонент должен иметь входной параметр и порождать событие
  props: ['count'],
  template: `<button type="button" :count="counter">1</button>`,
  data() {
    return {
      count: 0
    }
  },
  methods: {
    counter() {
      count += 1
    }
  }
});

App.js

import { defineComponent } from './vendor/vue.esm-browser.js';
import CounterButton from './CounterButton.js';

export default defineComponent({
  name: 'App',

  components: {
    CounterButton,
  },

  data() {
    return {
      count: undefined,
    };
  },

  template: `
    <div class="sample container">
      <p>count = {{ count }}</p>
      <p>
        <CounterButton :count="count" @update:count="count = $event" />
      </p>
      <p>
        <CounterButton v-model:count="count"></CounterButton>
      </p>
      <p>
        <CounterButton v-model:count="count"></CounterButton>
      </p>
    </div>
  `,
});

Comments

[Farkl]

по клинку в CounterButton @click="$emit('update:count', count+1)". попробуй так

[Алексей]

Farkl, Он увеличивает до значения 1, и перестает отрабатывать

[Farkl]

Алексей, потому что не нужно в data его объявлять, у тебя же count пропс, зачем его еще в data объявлять

[Froggyweb]

насколько я знаю это дефолтный компонент для реакт, для вью - точно.

[Алексей]

Farkl, без объявление получал Nan, как только в props еще указал тип данных искомое решение было получено, спасибо!

Answer 1

[Aetae]

export default defineComponent({
  name: 'CounterButton',
  props: {
    count: {
      type: Number,
      default: 0
    }
  },
  template: `<button type="button" @click="counter++">{{counter}}</button>`,
  emits: ['update:count'],
  setup(props, context) {
    const innerCounter = ref(props.count);
    watch(() => props.count, (value) => innerCounter.value = value);
    return {
      counter: computed({
        get: () => innerCounter.value,
        set: (value) => context.emit('update:count', innerCounter.value = value)
      })
    }
  }
})

Comments

[Алексей]

Aetae ReferenceError: ref is not defined

[Aetae]

Алексей, эту тайну предлагаю тебе раскрыть самому.

[Алексей]

Aetae, :(

[Алексей]

Aetae, Так и не смог разобраться в вашем коде
Попробовал преобразовать свой на основе вашего и ещё одного комментатора, и все сработало

export default defineComponent({
  name: 'CounterButton',

  // Компонент должен иметь входной параметр и порождать событие
  props: {
        count: {
          type: Number,
          default: 0
        }
      },
  template: `<button type="button"   @click="$emit('update:count', count+1)">1</button>`,

  methods: {
    counter() {
      count += 1
    }
  }
});

[Farkl]

Алексей, метод counter() удалить можно