1

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.

5
  • ¿Qué hace jQuery junto a VueJS?
    – fredyfx
    Commented el 3 abr. 2019 a las 2:11
  • ¿por que no se podrian usar juntos? Commented el 3 abr. 2019 a las 2:13
  • lo utilizo para plugins tengo cuidado de no tocar territorio de vue con jquery Commented el 3 abr. 2019 a las 2:16
  • Responde a la pregunta. Por otro lado, ambas librerías tienen formas diferentes de trabajar, dependiendo de la habilidad del programador pueden llegar a ser conflictivas a tal punto que o se deja jquery o se deja vueJS.
    – fredyfx
    Commented el 3 abr. 2019 a las 2:17
  • si ya he investigado sobre eso pero debido a que utilizo muchos plugins debo tenerlo dentro Commented el 3 abr. 2019 a las 2:20

1 respuesta 1

1

Solución: Luego de dias de cafeína y pruebas he dado con el problema silencioso.

El problema es que la instancia vue esta teniendo interferencias con el @RenderBody() de MVC ya que solo los selectores dentro de la vista que se carga con este método sufren este problema. Como he llegado a esa conclusión:

Pues al eliminar mi instancia de vue todo funciona o si quito el @RenderBody() obviamente.

Entonces la solución fue esperar al que el documento este listo para proceder a crear la instancia de vue.

Asi de simple:

var vueGlobal;
$(function(){
  vueGlobal = new Vue({
    el:"#vueGlobal",
    data:{
      misDatos: []
    },
    methods:{
      unMetodo: () => console.log("soy un método"),
    },
  });
});

Ahora los selectores en mi vista hija funcionan y no se crea esa copia extraña.

Tener en cuenta que este problema existirá si hay un @RenderBody() dentro de una instancia de vue.

Espero que esto evite tanto dolores de cabezas como lo pudo hacer conmigo.

1
  • Marca la respuesta como aceptada, ayudarás a mantener la buena salud del sitio :D
    – fredyfx
    Commented el 17 abr. 2019 a las 20:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.