Bind my vuejs model data to the object that will post-CodePudding

I am tasked with binding the data from my input into my vuejs model-so that when the text change happens, it updates in the model. I tried putting the.UnitName inside the model, but that doesnt work either. Can someone give me some insight on how to do this.

  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>

CodePudding user response：

Your data must be a function that returns an object, then you just need to bind the onclick of your button. Remember to preventDefault on the form submission, so your page doesn't reload.

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>