Почему событие ввода моего компонента не сработает, пока компонент не будет сброшен? - PullRequest
Новая
       12

Почему событие ввода моего компонента не сработает, пока компонент не будет сброшен?

0 голосов
/ 24 марта 2020

У меня есть laravel проект, который использует vue. Существует очень простой компонент, который представляет простую форму. Но очень странным образом входные данные не являются реактивными. Единственное решение, которое я смог найти, - дать ключу форму и изменить его после загрузки компонента. Только тогда данные стали реактивными. Обычно событие ввода должно запускаться и отображаться на вкладке «vue -devtools», но в этом компоненте вообще нет события ввода (до тех пор, пока ключ формы не будет изменен). (На самом деле код прост и не имеет большого значения) 

<template>
    <el-form :model="form" ref="profileForm" :key="'fix_reactive_input_issue_key'+fix_reactive_input_issue_key">
        <el-container>            
            <el-main>
                <el-row :gutter="20">
                    <el-col :span="18">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item prop="first_name" label="Name">
                                    <el-input v-model="form.first_name" placeholder="Name"></el-input>
                                    <div class="axios error" v-if="errors['first_name']" > <span>{{ errors['first_name'][0] }}</span> </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item prop="last_name" label="Surname">
                                    <el-input v-model="form.last_name" placeholder="Surname"></el-input>
                                    <div class="axios error" v-if="errors['last_name']" > <span>{{ errors['last_name'][0] }}</span> </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-main>

            <el-footer>
                <el-button @click="submitForm()" :loading="submit_loading" type="success" >Update</el-button>
            </el-footer>

        </el-container>
    </el-form>
</template>

<script>
export default {
    name: "profile_module",
    data() {
        return {
            fix_reactive_input_issue_key: 1,
            form: {
                first_name:"",
                last_name:""
            }
            submit_loading: false,
            errors: [],
        }
    },
    methods: {
        submitForm(){
            .........
        },
    },
    mounted(){
        setTimeout( ()=> this.fix_reactive_input_issue_key++, 100 );
    }
}
</script>

На самом деле я пробовал очень простую форму basi c, но она не сработала. Я знаю, что это связано со всем проектом, но я не смог его найти. Я могу использовать это как есть, но мне было интересно, испытал ли кто-нибудь что-то подобное. @Input не запускается, пока я не перефразирую sh компонент формы (также работает сброс). Я смог вызвать событие @click, но @input не работает. Я надеюсь, что кто-то испытал такую ​​вещь или знает, где может быть проблема.

...