Escribo esta pregunta auto respondida debido a que no he encontrado solución en la WEB sobre el problema que he detectado usando Vue.js con ASP.NET MVC 5.
Es un error silencioso ya que no marcaba nada en consola del navegador ni en tiempo de ejecución solo que no funcionaban mis paginas presentando principalmente el siguiente problema:
Selectores correctos pero no funcionales:
Raro pero cierto como casi todos utilizo _layout.cshtml
en asp.net mvc y dentro de este se renderizan todas mis paginas por medio de @RenderBody
.
Paginas con esta estructura:
@{
ViewBag.Title = "opcion";
}
<section class="content-header"></section>
<section class="content">
<div class="box">
"Mi Pagina"
</div>
@section scripts{
<script src="~/Scripts/js/my.js" ></script>
}
</section>
y en mi archivo js tengo selectores globales, por ejemplo:
var text = document.getElementById("unInput");// ||
var algo = $("#otroElemento");
Entonces el problema es que al poner estas variables en la consola tienen un valor es decir tienen un selector pero es una copia del elemento original es decir si hago:
text.value = "Prueba";
Mi input del documento no cambia pero si obtengo el valor de la variable si ha cambiado en la variable, a primera instancias parece como si los cambios no afectaran al documento.
Utilizo vue en mi _layout.cshtml
aqui dejo un ejemplo minimo:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>@ViewBag.Title - MiSitio</title>
@Styles.Render("~/Content/css")
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
</head>
<body id="vueGlobal">
//Mis elementos
<div class="content">
@RenderBody()
</div>
@Scripts.Render("~/Content/vue")
</body>
</html>
Y tengo una instancia vue en un documento js parecido a esto:
var vueGlobal = new Vue({
el:"#vueGlobal",
data:{
misDatos: []
},
methods:{
unMetodo: () => console.log("soy un método"),
},
});
¿Ahora por que digo los selectores no son funcionales? Simplemente no funcionan, no puedo agregar valores ni utilizarlos para algo.