title: Dynamic price calculation using Vue.js
body: <p>I am building a hotel booking application and currently I am working on the booking part. </p>
  
  <p>Here I am giving the user the option to edit the preferred room type and the number of adults and the number of children using a select box. </p>
  
  <p>In clear, say if the user selected the room type "standard room" with one adult and no children, then we can get the default price value that was already stored for that particular room.  </p>
  
  <p>I have attached the fiddle up to the this step:</p>
  
  <p><a href="https://jsfiddle.net/c1ud4mkv/" rel="nofollow noreferrer">https://jsfiddle.net/c1ud4mkv/</a>. </p>
  
  <p>I am in the need of help after this step. If the user needs to stay with 2 adults and one or two children, then the price needs to changed accordingly.</p>
  
  <p>For example; the price as of now for a standard room type with 1 adult was Rs.1000.</p>
  
  <p>If the user wants to add 1 extra adult it means the price needs to change to Rs.2000. And if the user needs to add 1 child along with 2 adults it means the price needs to be calculated as Rs.3000 (Rs.2000 + Rs.1000) (Rs.1000 is price for extra 1 child). </p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div id="app"&gt;
   &lt;table&gt;
      &lt;thead&gt;
       &lt;td&gt;Room Type&lt;/td&gt;
       &lt;td&gt;Adult&lt;/td&gt;
       &lt;td&gt;Children&lt;/td&gt;
       &lt;td&gt;Total Price&lt;/td&gt;
      &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr v-for="(row, index) in rows"&gt;
              &lt;td&gt;
                &lt;select data-value="Room Type"&gt;
                  &lt;option v-for="room in rooms"&gt;{{room.title}}&lt;/option&gt;
                &lt;/select&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;select data-value="1 Adult"&gt;
                &lt;option value="1"&gt;1 Adult&lt;/option&gt;
                &lt;option value="2"&gt;2 Adults&lt;/option&gt;
              &lt;/select&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;select data-value="No Child"&gt;
              &lt;option value="1"&gt;No Child&lt;/option&gt;
              &lt;option value="2"&gt;1 Child&lt;/option&gt;
              &lt;option value="3"&gt;2 Children&lt;/option&gt;
            &lt;/select&gt;
          &lt;/td&gt;
          &lt;td v-for="item in items"&gt;
            {{item.price}}
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
      &lt;div class="add-remove"&gt;
      &lt;div class="col-md-6 text-center add"&gt;
        &lt;a @click="addRoom" class="add-room"&gt; Add Room &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="col-md-6 text-center remove"&gt;
        &lt;a @click="removeRoom(index)" class="remove-room"&gt; Remove Room &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And Script was:</p>
  
  <pre><code>new Vue({
    el: '#app',
  
    data: {
      rows: [],
      rooms: [
      {
          value:0,
          title: 'Standard Room'
      },
      {
          value:0,
          title: 'Deluxe Room'
      },
      ],
      items: [{
          price: 1000,
      }]
    },
  
    methods: {
      addRoom: function() {
        var elem = document.createElement('tr');
        this.rows.push({
        });
      },
  
      removeRoom: function(index) {
        this.rows.splice(index, 1);
      },
  
      }
  
    })
  </code></pre>
  
  <p>And jsfiddle link is <a href="https://jsfiddle.net/c1ud4mkv/" rel="nofollow noreferrer">https://jsfiddle.net/c1ud4mkv/</a></p>