Блог

Главная - Вопросы по программированию - показывать редактируемое поле, когда оно пустое

показывать редактируемое поле, когда оно пустое

#laravel #vue.js

Вопрос:

У меня есть такая проблема: у меня есть компонент, с помощью которого я создаю редактируемые поля. Если поле уже заполнено, все работает нормально. Я вижу значение базы данных, я могу щелкнуть по нему и изменить его. С другой стороны, если в базе данных это значение пусто, оно «скрыто» в представлении. Таким образом, невозможно щелкнуть по нему, чтобы вставить значение в редактируемое поле.

Я попытался обойти препятствие, вставив: заполнитель = «заполнитель», но я даже этого не вижу.

Как я могу это сделать?

Это мой файл визуализации:

         <div class="py-0 sm:grid sm:grid-cols-10 sm:gap-4 my-2">
            <dt class="text-md leading-6 font-medium text-gray-900 sm:col-span-2 self-center">
                {{ $trans('labels.description') }}
            </dt>
        </div>
        <div class="py-1 sm:grid sm:grid-cols-10 sm:gap-4">
            <dd class="text-sm leading-5 text-gray-600 sm:mt-0 sm:col-span-10 self-center">
                <v-input-text-editable
                    v-model="task.description"
                    @input="updateTask()"
                    :placeholder = "placeholder"
                />
            </dd>
        </div>   
 
 props: {
    users: {
        type: Array,
        default: []
    },

    description: {
        type: String,
        default: null
    }
},
 
 data() {
    return {
        task: new Form({
            description: this.description
        })
    }
},

это мой компонент:

 <template>
    <div class="block w-full">
        <div v-if="!editable" class="cursor-pointer" @click="enableEditMode()">
            {{ valueAfterEdit }}
        </div>

        <div v-else class="mt-1 flex rounded-md shadow-sm" v-click-outside="handleClickOutside">
            <div class="relative flex-grow focus-within:z-10">
                <input @keyup.enter="commitChanges()" class="form-input block w-full rounded-none rounded-l-md transition ease-in-out duration-150 sm:text-sm sm:leading-5" v-model="valueAfterEdit" ref="input"/>
            </div>

            <span class="btn-group">
                <button @click="discardChanges()" type="button" class="btn btn-white rounded-l-none border-l-0">
                    <svg class="h-4 w-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/>
                    </svg>
                </button>

                <button @click="commitChanges()" type="button" class="btn btn-white">
                    <svg class="h-4 w-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/>
                    </svg>
                </button>
            </span>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            value: {
                type: String,
                default: null
            },

            allowEmpty: {
                type: Boolean,
                default: false
            }
        },

        data() {
            return {
                editable: false,
                valueBeforeEdit: this.value,
                valueAfterEdit: this.value
            }
        },

        watch: {
            value(val) {
                this.valueBeforeEdit = val;
            }
        },

        methods: {
            handleClickOutside() {
                this.disableEditMode();
                this.commitChanges();
            },

            enableEditMode() {
                this.editable = true;
                this.$emit('edit-enabled');

                this.$nextTick(() => {
                    this.$refs.input.focus();
                });
            },

            disableEditMode() {
                this.editable = false;
                this.$emit('edit-disabled');
            },

            commitChanges() {
                if (!this.allowEmpty amp;amp; this.valueAfterEdit !== '.') {
                    this.$emit('input', this.valueAfterEdit);
                    this.disableEditMode();
                }
            },

            discardChanges() {
                this.valueAfterEdit = this.valueBeforeEdit;
                this.disableEditMode();
            }
        }
    }
</script>

Комментарии:

1. убедительно просим вас улучшить вопрос. укажите, как вы извлекаете данные и как вы настраиваете их в текстовый файл. таким образом, мы можем определить, где возникает проблема. до голосования по этому вопросу, чтобы улучшить знания со всем мировым сообществом

2. @MohamedRaza привет, я добавил свой компонент в вопрос. возможно, это может быть полезно для поиска решения. Мне нужно, чтобы, когда редактируемое поле пусто, оно все еще должно быть видно, чтобы можно было щелкнуть по нему и вставить текст. Однако в данный момент, если он пуст, он скрыт в представлении, и я не могу нажать на него, чтобы вставить содержимое.

3. Кто-нибудь может мне помочь?

4. Я не вижу функции выборки в вашем вопросе о том, где вы получаете эти данные. пожалуйста, обновите его по этому вопросу

Метки: ,