时间戳

首页 > 解决方案 > 我如何知道标有 vueJS 的复选框的值

javascript - 我如何知道标有 vueJS 的复选框的值

问题描述

我正在用 Laravel 和 vueJS 完成一个项目，但是我有一个问题。在模式中，我选择一个复选框（可能有多个或没有）和标记复选框的值，当我在另一个模式中按下按钮时，我需要保留它，复选框的值被发送到控制器进行更新。第一次检查对我来说效果很好，但如果我选择另一个，第一个总是带我。我想按课赶上，但什么都没有，总是先拿。

我附上我当前的代码：

<div class="modal-body">
                <div v-if="bonosUsuarioSolicitante.length == 0">No hay bonos disponibles</div>
                <div v-for="data in bonosUsuarioSolicitante" class="ml-5">

                    <label class="form-check-label">Tiempo Restante</label>
                    <input type="checkbox" class="form-check-input ml-3 codContrato" :value="data.codContrato" @click="iniciarActuacion">
                    <label class="form-check-label ml-5">{{data["tiempoRestanteBono"]}} Min</label>

                </div>
            </div>

在那里，我将复选框的值放在调用“startAction”函数的模态中，直到那里。如果一切顺利，这个模态就关闭了。

在另一个模式中，我有这个：

<button type="button" class="btn btn-primary" @click="detenerActuacion">Detener Actuacion</button>

这个功能是我要更新的功能

detenerActuacion: function(){
        clearInterval(cronometro);

        let minutosContratados = $("#tiempoContratado").val();

        // Mínimo se va a restar 5 minutos a la actuación una vez iniciada.
        let minutosActuacion = 5

        let minutosEmpleados = document.getElementById("minutos").innerText;

        if(minutosEmpleados < minutosActuacion){
            minutosEmpleados = minutosActuacion;
        }


        // variables que van al controlador
        let tiempoEmpleadoCalculado = minutosContratados - minutosEmpleados;


        let mensaje = $("#mensajeActuacion").val();
        let codV3 = $("#codV3").val();
        let codContrato = $(".codContrato").val();
       
        let url = "/actualizarTiempo";
        axios
            .post(url, {
                        tiempoEmpleado: minutosEmpleados,
                        tiempoRestante: tiempoEmpleadoCalculado,
                        mensajeActuacion: mensaje,
                        codContrato: codContrato,
                        codV3: codV3,
                       }
                  )
            .then((response) => {
                $("#actuacionCorrecta").text("Actuación guardada con exito y tiempo del bono actualizado")
            })
            .catch(
                (error) => $("#actuacionError").append(error)

            );
    },

我混合了 jQuery，它不应该与 vueJS 一起完成。在第一个模式中，我可以获得 codContrato，这是我需要更新的。因此，我尝试用课堂来捕捉它。正如我所说，第一个进展顺利......但就是这样。

标签： javascriptphpjquerylaravelvue.js

解决方案

使用v-model，它可能非常容易。

检查以下示例代码：

<template>
    <div class="container">
        <div v-for="(data,index) in check_data" :key="index">
            <input type="checkbox" :value="data.id" @change="check()" v-model="checked">test {{data.value}}
        </div>
    </div>
</template>

<script>
export default {
    name: "example",
    data(){
        return {
            check_data:[{id:1,value:'a'},{id:2,value:'b'},{id:3,value:'c'}],
            checked:[],
        }

    },
    methods:{
        check(){
            console.log(this.checked);
        },

    }
}
</script>

推荐阅读