VueJS - 数据列表输入不清除值

Question

我有一个 vue 组件，可以扫描二维码并在成功后将一些信息输入数据库。这很好用。但是，一旦数据发送成功，我想像这样清除我的数据列表输入字段：$('#adduser').val('');，但没有任何效果。输入保持填写状态。

这是我目前的代码..

<template>
    <div>
        <p class="message">{{ error }}</p>
        <div class="qr-fullscreen">
            <p class="decode-result" style="color:#ccc">Scanned: <strong style="color:#fff">{{ name }}</strong>
                <br>
                <input name="adduser" id="adduser" @input="addParticipation(user.upn)" class="form-control user_input" type="text" v-model="user.upn" list="manual" placeholder="Manually add an attendee">
                <datalist id="manual">
                    <option v-for="user in users" v-bind:value="user.upn">{{user.firstname}} {{user.lastname}} (Year {{user.year}})</option>
                </datalist>
            </p>
            <qrcode-stream @decode="onDecode" @init="onInit" />
            <a v-bind:href="'/admin/sessions/'+this.session.id" class="qr-fullscreen-close">
                <i class="fa fa-times"></i>
            </a>
        </div>
    </div>
</template>

<script>
    import { QrcodeStream } from 'vue-qrcode-reader';

    export default {

        mounted() {
            $('.loading').hide();
        },

        components: { QrcodeStream },

        data () {
            return {
                result: '',
                error: '',
                name: 'No one scanned',
                user: [],
                objectItem: {},
            }
        },

        methods: {
            onDecode (result) {
                this.result = result;
                this.addParticipation(this.result);
            },

            addParticipation(upn){

                var last_character = upn[upn.length-1];
                if(isNaN(last_character)){}else{

                    let currentObj = this; // important?
                    axios.post('/api/session_capture', {
                        session_id: this.session.id,
                        upn: upn,
                        api_token: localStorage.getItem('api_token')
                    })
                        .then((response) => {
                            //var audio = new Audio(require('audio/snap.mp3'));
                            //audio.play();
                            if (response.data.message) {
                                this.message(response.data.message, 4000);
                            } else {
                                this.playSound();
                                this.message(response.data.name + ' added successfully', 2000);
                                this.name = response.data.name;
                                $('#adduser').val('');
                            }


                        })
                        .catch((error) => {
                            currentObj.output = error;
                            console.log(currentObj.output);
                        });
                }
            },
            message($message,$time){
                $('.message').text($message).fadeIn(500, function(){
                    setTimeout(function(){
                        $('.message').fadeOut(500);
                    }, $time);
                });
            },
            playSound() {
                const path = this.root+'/audio/snap.mp3';
                const audio = new Audio(path);
                var playPromise = audio.play();

                if (playPromise !== undefined) {
                    playPromise.then(_ => {
                        console.log('Did you hear that?');
                    })
                        .catch(error => {
                            console.log(`playSound error: ${error}`);
                        });
                }
            },

            async onInit (promise) {
                try {
                    await promise
                } catch (error) {
                    if (error.name === 'NotAllowedError') {
                        this.error = "ERROR: you need to grant camera access permisson"
                    } else if (error.name === 'NotFoundError') {
                        this.error = "ERROR: no camera on this device"
                    } else if (error.name === 'NotSupportedError') {
                        this.error = "ERROR: secure context required (HTTPS, localhost)"
                    } else if (error.name === 'NotReadableError') {
                        this.error = "ERROR: is the camera already in use?"
                    } else if (error.name === 'OverconstrainedError') {
                        this.error = "ERROR: installed cameras are not suitable"
                    } else if (error.name === 'StreamApiNotSupportedError') {
                        this.error = "ERROR: Stream API is not supported in this browser"
                    }
                    message(this.error);
                }
            }
        },

        props:[
            'session',
            'root',
            'users'
            ],
    }



</script>

<style>
    .message {
        position: fixed;
        z-index: 2001;
        padding: 10%;
        left: 0;
        text-align: center;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
        display:none;
    }
    .user_input{
        margin-top: 5px !important;
        width: 90vw !important;
    }

</style>

Answer 1

为您的输入定义一个专用的 属性。

 data () {
    return {
             ... // rest remains same
                currentUser
            }
        },

将您输入的 v-model 绑定到 currentUser

<input name="adduser"
       id="adduser" 
       @input="addParticipation(user.upn)"
       class="form-control user_input" 
       type="text" 
       v-model="currentUser" 
       list="manual" placeholder="Manually add an attendee">

在您要清除数据的位置分配 currentUser 一个空值。 所以把这个 :$('#adduser').val(''); 改成这个: this.currentUser=''.

并且停止使用JQuery。如果您使用的是 Vue、Angular 或 React 类框架，它们有自己的处理方式。使用它们而不是创建额外的或遗留的依赖项。

如果您使用 v-for，请尽可能提供 v-bind:key。

<datalist id="manual">
    <option v-for="user in users"
            v-bind:value="user.upn"
            v-bind:key="user.upn">
           {{user.firstname}} {{user.lastname}} (Year {{user.year}})
   </option>
</datalist>