VueJS установить значение по умолчанию для пользовательского компонента из реквизита

Question

Привет, ребята. Я попытался создать пользовательский компонент VueJS, чтобы обернуть Vue Autonumeric компонент.

https://github.com/autoNumeric/vue-autoNumeric

На странице Vue Autonumeric конкретно упоминается предостережение

Предупреждения Обратите внимание, что прямая установка: value = '42 'для компонента будетсломай это (правда!).НЕ делайте этого:

Итак, в моем пользовательском компоненте MoneyComponent.vue я создаю v-модель

Это полный код

<template>
    <div>
        <vue-autonumeric
                v-model="amount"
        ></vue-autonumeric>
    </div>
</template>

<script>
    import VueAutonumeric from 'vue-autonumeric/src/components/VueAutonumeric.vue';

    export default {
        components: {
            VueAutonumeric,
        },
        props: {
            value: {},
        },
        data() {
            return {
                amount: this.value,
            }
        },
        methods: {


        },
        watch: {

            amount (value) {
                this.$emit('input', value);
            }

        },
    }
</script>

Использованиепример

<template>
    <v-money
        v-model="price"
    ></v-money>
</template>
<script>
    export default {
        data() {
            return {
                price: 45,
            }
        },
        methods: {


        }
    }
<script>

Это работает с начальным значением родительского элемента.Однако, если я, например, изменю свойство цены на 55, свойство количества в MoneyComponent не изменится.

В чем заключается проблема: свойство количества не реагирует на повторные изменения?Как мне это исправить?

Спасибо

Answer 1

Поскольку вы используете v-model, вам нужно вызвать событие input, чтобы данные изменились в родительском

    watch: {
      amount: function (newVal) {
        this.$emit('input', newVal)
      },
      value: function (newVal, oldVal) {
        if (newVal !== oldVal) {
          this.amount = newVal
        }
      }
    }

, а затем в вашем компоненте

<template>
    <div>
        <vue-autonumeric
          v-model="amount"
        ></vue-autonumeric>
    </div>
</template>

<script>
    import VueAutonumeric from 'vue-autonumeric/src/components/VueAutonumeric.vue';
    export default {
        components: {
            VueAutonumeric,
        },
        props: {
            value: {},
        },
        data() {
            return {
                amount: this.value,
            }
        },
        watch: {
          amount: function (newVal) {
            this.$emit('input', newVal)
          },
          value: function (newVal, oldVal) {
            if (newVal !== oldVal) {
              this.amount = newVal
            }
          }
        }
    }
</script>