title: Object oriented data in Vue.JS
body: <p>I have a simple Vue.JS example simulating people playing lottery.
  I enter the names of the players, pushed into a list and get them listed on the screen
  At the end, I find the winner which is select from the list.
  I want to change this to a object oriented example. I want to have a player object with two attributes;
      Name
      Amount (the amount played with)
  So I should have two input boxes, and the ADD button should add a player object in a players list.</p>
  
  <p>This is my code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
     &lt;meta charset="UTF-8"&gt;
     &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
     &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
     &lt;link href="https://fonts.googleapis.com/css?family=Anton|Roboto:300,400,500" rel="stylesheet"&gt;
     &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
     &lt;title&gt;Who pays the bill&lt;/title&gt;
  &lt;/head&gt;
  &lt;style&gt;
     body {
  font-family: 'Roboto', sans-serif;
  padding:0;
  margin:0;
  }
  
  a {
  text-decoration: none;
  color:#ffffff;
  }
  
  .container {
  min-height: 300px;
  width: 360px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  }
  
  h1 {
  color: #2196F3;
  font-size: 40px;
  text-align: center;
  }
  
  .input_container {
  display: flex;
  }
  input:focus{
  outline: none;
  }
  input {
  flex-grow: 1;
  border: 1px solid #dddddd;
  background: #f2f2f2;
  font-size: 20px;
  border-radius: 5px 0px 0px 5px;
  padding: 10px;
  box-sizing: border-box;
  }
  
  button {
  border-radius: 0px 5px 5px 0px;
  background: #2196F3;
  color: #ffffff;
  font-size: 16px;
  padding: 10px;
  box-sizing: border-box;
  }
  
  .list_of_names {
  padding: 10px 0px;
  cursor: pointer;
  }
  
  .list_of_names div {
  margin-right: 10px;
  margin-bottom: 10px;
  background: #2196F3;
  color: #ffffff;
  display: inline-block;
  padding: 5px 10px;
  border-radius: 15px;
  }
  
  .error_message {
  color: #F44336;
  font-weight: 600;
  text-align: center;
  margin-top: 10px;
  }
  
  .action_button {
  cursor: pointer;
  border: 1px solid #607D8B;
  color: #607D8B;
  font-size: 16px;
  width: 200px;
  text-align: center;
  padding: 10px;
  border-radius: 11px;
  margin: 0 auto;
  }
  
  .action_button:hover {
  background: #607D8B;
  color:#ffffff;
  }
  
  .result_value {
  font-size: 70px;
  color: #607D8B;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
  }
  &lt;/style&gt;
  
  &lt;body&gt;
  
     &lt;div id="app"&gt;
  
        &lt;div id="names" class="container" v-if="state"&gt;
           &lt;h1&gt;Who Wins The Lottery?&lt;/h1&gt;
           &lt;div class="input_container"&gt;
              &lt;input type="text" v-model="inputName"&gt;
              &lt;button @click="addNameToList"&gt;ADD&lt;/button&gt;
           &lt;/div&gt;
           &lt;div class="error_message" v-if="showError"&gt;
              Please enter a name !!!
           &lt;/div&gt;
           &lt;div class="list_of_names"&gt;
              &lt;div v-for="(name,index) in names" :key="index" @click="removeName(index)"&gt;
                 {{ name }}
              &lt;/div&gt;
           &lt;/div&gt;
           &lt;div v-if="names.length &gt; 1"&gt;
              &lt;div class="action_button" @click="showResults"&gt;
                 Check the winner
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="result" class="container" v-if="!state"&gt;
           &lt;div class="result_container"&gt;
              &lt;h1&gt;The winner is:&lt;/h1&gt;
              &lt;div class="result_value"&gt;{{ result }}&lt;/div&gt;
              &lt;div class="action_button" @click="resetApp"&gt;
                 Start again
              &lt;/div&gt;
  
           &lt;/div&gt;
  
        &lt;/div&gt;
     &lt;/div&gt;
  
  &lt;/body&gt;
  
  
  &lt;script&gt;
     new Vue({
        el: '#app',
        data: {
           state: true,
           inputName: '',
           names: [],
           showError: false,
           result: ''
        },
        methods: {
           addNameToList() {
              if (this.validate(this.inputName)) {
                 this.names.push(this.inputName);
                 this.inputName = '';
                 this.showError = false;
              } else {
                 this.showError = true;
              }
           },
           removeName(index) {
              this.names.splice(index, 1);
           },
           validate(value) {
              if (value !== '') {
                 return true
              } else {
                 return false
              }
           },
           showResults() {
              let rand = this.names[Math.floor(Math.random()*this.names.length)]
              this.result = rand;
              this.state = false
           },
           resetApp() {
              this.state = true;
              this.names = [];
              this.result = ''
           }
        }
     })
  &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I tried this, but it does not work</p>
  
  <pre><code>  &lt;div id="names" class="container" v-if="state"&gt;
      &lt;h1&gt;Who Wins The Lottery?&lt;/h1&gt;
      &lt;div class="input_container"&gt;
        Name: &lt;input type="text" v-model="Player.inputName" /&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;div class="input_container"&gt;
        Amount: &lt;input type="text" v-model="Player.inputAmount" /&gt;
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;div class="input_container"&gt;
        &lt;button @click="addNameToList"&gt;ADD&lt;/button&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>With this javascript</p>
  
  <pre><code>new Vue({
    el: "#app",
    data: {
      state: true,
      Player={
         inputName: "",
         InputAmount,
      },
      //inputName: "",
      Players: [],
      showError: false,
      result: ""
    },
    methods: {
      addNameToList() {
        //if (this.validate(this.Player.inputName)) 
        alert(this.Player.inputName);
          this.names.push(this.Players.player);
  
          this.Player.inputName = "";
          this.Player.InputAmount = "";
  
  
      },
      removeName(index) {
        this.names.splice(index, 1);
      },
  </code></pre>
  
  <p>I guess the problem is in v-model directive. Is it possible to v-model an object, such that a bunch of HTML fields correspond to the attributes of a data object?
  Any ideas?</p>