Tengo la tarea de vincular los datos de mi entrada en mi modelo vuejs, de modo que cuando ocurra el cambio de texto, se actualice en el modelo. Intenté poner .UnitName dentro del modelo, pero tampoco funciona. ¿Puede alguien darme una idea de cómo hacer esto.
new Vue({ el: "#app", data: { UnitName:'', }, methods: { toggle: function(todo){ todo.done = !todo.done } } }) $( document ).ready(function() { $("#myMagic").click(function(){ alert("test"); $.ajax({ url: "", type: "POST", data: { "UnitName": "bobby", }, headers: { "content-type": "application/x-www-form-urlencoded" }, }) }) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://s.brightspace.com/lib/jquery/2.2.4/jquery.min.js" role="presentation"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <body> <div id="app" class="container"> Title <input v-model="UnitName">{{UnitName}}<br><br> <button class="btn btn-primary" id="myMagic">Create</button> </div>Sus datos deben ser una función que devuelva un objeto, luego solo necesita vincular el clic de su botón. Recuerde prevenir Predeterminado en el envío del formulario, para que su página no se vuelva a cargar.
new Vue({ el: "#app", data(){ return { UnitName:'' } }, methods: { toggle: function(todo){ todo.done = !todo.done }, onSubmit(event){ event.preventDefault(); alert(this.UnitName); $.ajax({ url: "", type: "POST", data: { "UnitName": this.UnitName, }, headers: { "content-type": "application/x-www-form-urlencoded" } }) } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://s.brightspace.com/lib/jquery/2.2.4/jquery.min.js" role="presentation"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <body> <div id="app" class="container"> Title <input v-model="UnitName">{{UnitName}}<br><br> <button class="btn btn-primary" id="myMagic" @click="onSubmit">Create</button> </div>