Блог

У меня есть компонент под названием Input.vue, который в основном печатает ярлык и ввод некоторого типа. Это выглядит примерно так:

 <template>
    <div class="form-element">
        <label :for="inputId" :class="['form-element-title', { 'js-focused': focused }]">{{ label }}</label>
        <input :disabled="!canEdit" :type="inputType" :id="inputId" :name="inputName" v-model="inputData" :placeholder="placeholder" @focus="focused = true" @blur="focused = false">
    </div>
</template>

<script lang="ts">
    import { Component, Prop, Vue } from 'vue-property-decorator';

    @Component
    export default class Input extends Vue {
        @Prop({ default: () => {} }) inputId!: string
        @Prop({ default: () => {} }) inputType!: string
        @Prop({ default: () => {} }) inputName!: string
        @Prop({ default: () => {} }) label!: string
        @Prop({ default: () => {} }) placeholder!: string
        @Prop({ default: () => {} }) data!: string
        @Prop({ default: () => true }) canEdit!: boolean

        private inputData = this.data;
        private focused = false
    }
</script>
 

Он вызывается из другого компонента, подобного этому:

 <input-component inputId="formDiscountName"
                 inputType="text"
                 inputName="discountName"
                 :label="translations['name']"
                 :placeholder="translations['name']"
                 :data="discount.name"
/>
 

Теперь проблема в том, что если я введу какие-либо данные в этот ввод, discount.name не получает никакого установленного значения, потому что внутри input-component оно мгновенно присваивается переменной inputData, а свойство data не обновляется. Теперь я не могу изменить само свойство data из-за предупреждения Vue.

Что мне делать? Я пытался использовать вычисляемые свойства, но я не уверен, как должны выглядеть функции get и set.

Одна вещь, о которой я могу думать, это использовать вычисляемое свойство и выдавать обновление для заданной функции:

 get inputData() {
    return this.data;
}

set inputData(value: string) {
    this.$root.$emit('inputUpdate', {'inputName' : this.inputName, 'inputValue' : value});
}
 

Но emit выглядит не очень чистым методом. Есть ли что-нибудь лучше?

Вы можете добавить наблюдателя для входных данных. Сообщение о том, что есть несколько способов, которые discount.name может быть обновлен.

1. Либо передайте значение inputData из наблюдателя, либо добавьте обработчик в родительский компонент

Или

2. Не уверен, каково ваше использование здесь, но вместо того, чтобы передавать discount.name , вы можете передать объект скидки, а затем изменить свойство name объекта — никаких предупреждений не будет, поскольку вы изменяете свойство объекта.