事件keyup vueJS

时间:2020-11-02 11:01:15

标签: javascript php laravel vue.js

我正在使用vueJS创建托盘通风孔,一切正常,我的问题是当我发送控制器中URL的参数为空时...

我在方法.then中执行console.log(),然后我可以看到结果还可以,我想说,如果我对变量js执行console.log没有响应,则响应为空。 ..在其他组件中,我正在做的完全一样,而且一切正常...我看不到我的错误。

我附上了我的实际代码:

Vue组件

<template>
    <div class="">
        <div class="d-flex">
            <div class="justify-content-center offset-md-3">
                <label for="codigoAsistencia">Código de asistencia.</label>
                <input type="text" id="codigoAsistencia" placeholder="Código" class="form-control">
                <label for="cliente">Cliente.</label>
                <input type="text" v-on:keyup="codigoAsistencia" id="codigoAsistencia" placeholder="Cliente" class="form-control" >
            </div>
            <div class="justify-content-center offset-md-3">
                <label for="fechaInicio">Fecha de inicio.</label>
                <input type="date" id="fechaInicio" placeholder="Fecha Inicio" class="form-control">
                <label for="fechaFin">Fecha fin.</label>
                <input type="date" id="fechaFin" placeholder="Fecha Fin" class="form-control">
            </div>

        </div>

        <div class="d-flex tabla-resultado offset-md-3 mt-3">

            <div class="table-responsive">
                <table class="table">
                    <thead class="thead-dark">
                        <tr>
                            <th>Código</th>
                            <th>Fecha</th>
                            <th>Usuario</th>
                            <th>Estado</th>
                            <th>Tiempo empleado actuación</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                   
                </table>
            </div>
        </div>
    </div>
    
</template>

<script>
    

    export default {
        data() {
            return {
                
            };

        },

        methods: {
            codigoAsistencia: function (event) {
                let codigoAsistencia = $("#codigoAsistencia").val();
                let url = "/getAsistenciaCodigo";
                

                axios
                    .get(url, { codigo: codigoAsistencia } )
                    .then((response) => {
                        console.log(response);

                        console.log(codigoAsistencia);

                    })
                    .catch((error) => console.error(error));
            },

            buscarUsuario: function(){
                let url = "/getBonoUsuario";
                axios.get(url)
                        .then((response) => {
                            this.bonosUsuario = response.data;

                            console.log(this.bonosUsuario);
                        });
            },

            
            buscarFecha: function(){
                alert("renovado");
            }
        },
    };
</script>

控制台结果

{data: "", status: 200, statusText: "OK", headers: {…}, config: {…}, …}
app.js:2832 code: 2

1 个答案:

答案 0 :(得分:1)

您不能像这样尝试获取价值

axios
.get(url, { params: { codigo: codigoAsistencia } })
.then((response) => {
    console.log(response);

    console.log(codigoAsistencia);
})
.catch((error) => console.error(error));

您需要通过params:{}来发送获取数据

参考链接https://github.com/axios/axios#note-commonjs-usage

相关问题