Tengo un PHP donde tengo codigo HTML y este está enlazado con un archivo JS donde codifico vuejs.
las variables {{idagenda}}
, {{nrosininformar}}
, {{nrofinalizados}}
declaradas en el html principal sí responden a la reactividad de vuejs, pero cuando desde ese html hago clic en un botón que muestra un modal de Bootstrap, las variables {{idagenda}}
, {{nrosininformar}}
, {{nrofinalizados}}
declaradas en este modal no toman los cambios.
Este es el HTML que activa el modal dentro del PHP
<p>{{idagenda}}</p>
<p>{{nrosininformar}}</p>
<p>{{nrofinalizados}}</p>
<div onclick="pruebavuejs()" class="button btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalprueba" type="button">
presiona
</div>
<div class="modal fade" id="modalprueba1" data-bs-backdrop="static" data-bs-keyboard="false" aria-labelledby="mmodalprueba1Label" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content" style='border-color: red;'>
<div class="modal-header">
<p>{{idagenda}}</p>
<p>{{nrosininformar}}</p>
<p>{{nrofinalizados}}</p>
</div>
</div>
</div>
</div>
esta función está en un archivo JS
function pruebavuejs(){
vueEspecialista.idagenda="6666";
}
Este es un método de un archivo JS que está declarado en el HTML
let vueEspecialista = new Vue( { el : "#vueEspecialista", data :{ idagenda : "0000", nrosininformar : 0, nrofinalizados : 0, }, methods :{ pruebavuejs : function(){ vueEspecialista.idagenda="6666"; },
contadores : function(){
var params = new URLSearchParams();
params.append('estado','1');
axios.post(config.especialistaController+'contadores',params).then(function(response)
{
vueEspecialista.nrosininformar = response.data[0].pendiente;
vueEspecialista.nrofinalizados = response.data[0].finalizada;
})
},
},
mounted: function(){
$( document ).ready(function() {
vueEspecialista.contadores();
});
}
});