#javascript #vue.js
#язык JavaScript #vue.js
Вопрос:
Мне поручено привязать данные из моих входных данных к моей модели vuejs, чтобы при изменении текста они обновлялись в модели. Я попробовал положить.Имя единицы внутри модели, но это тоже не работает. Может кто-нибудь дать мне некоторое представление о том, как это сделать.
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" }, }) }) }); lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"gt;lt;/scriptgt; lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"gt; lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"gt; lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"gt; lt;script src="https://s.brightspace.com/lib/jquery/2.2.4/jquery.min.js" role="presentation"gt;lt;/scriptgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"gt;lt;/scriptgt; lt;bodygt; lt;div id="app" class="container"gt; Title lt;input v-model="UnitName"gt;{{UnitName}}lt;brgt;lt;brgt; lt;button class="btn btn-primary" id="myMagic"gt;Createlt;/buttongt; lt;/divgt; Ответ №1:
Ваши данные должны быть функцией, которая возвращает объект, тогда вам просто нужно привязать onclick вашей кнопки. Не забудьте предотвратить ошибку при отправке формы, чтобы ваша страница не перезагружалась.
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" } }) } } }); lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"gt;lt;/scriptgt; lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"gt; lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"gt; lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"gt; lt;script src="https://s.brightspace.com/lib/jquery/2.2.4/jquery.min.js" role="presentation"gt;lt;/scriptgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"gt;lt;/scriptgt; lt;bodygt; lt;div id="app" class="container"gt; Title lt;input v-model="UnitName"gt;{{UnitName}}lt;brgt;lt;brgt; lt;button class="btn btn-primary" id="myMagic" @click="onSubmit"gt;Createlt;/buttongt; lt;/divgt;