javascript - 使用 Vue.js 进行动态价格计算

Question

我正在构建一个酒店预订应用程序，目前我正在处理预订部分。

在这里，我为用户提供了使用选择框编辑首选房间类型以及成人人数和 child 人数的选项。

明确地说，如果用户选择了只有一名成人且没有 child 的房间类型“标准间”，那么我们可以获得已为该特定房间存储的默认价格值。

我已将 fiddle 附加到这一步:

https://jsfiddle.net/c1ud4mkv/ .

完成这一步后我需要帮助。如果用户需要与2位成人和1-2名 child 同住，则价格需要相应调整。

例如；截至目前，带 1 名成人的标准房型的价格为 1000 卢比。

如果用户想增加 1 位额外的成人，则意味着价格需要更改为 Rs.2000。如果用户需要添加 1 个 child 和 2 个成人，则意味着价格需要计算为 Rs.3000(Rs.2000 + Rs.1000)(Rs.1000 是额外 1 个 child 的价格)。

HTML:

<div id="app">
 <table>
    <thead>
     <td>Room Type</td>
     <td>Adult</td>
     <td>Children</td>
     <td>Total Price</td>
    </thead>
        <tbody>
          <tr v-for="(row, index) in rows">
            <td>
              <select data-value="Room Type">
                <option v-for="room in rooms">{{room.title}}</option>
              </select>
            </td>
            <td>
              <select data-value="1 Adult">
              <option value="1">1 Adult</option>
              <option value="2">2 Adults</option>
            </select>
          </td>
          <td>
            <select data-value="No Child">
            <option value="1">No Child</option>
            <option value="2">1 Child</option>
            <option value="3">2 Children</option>
          </select>
        </td>
        <td v-for="item in items">
          {{item.price}}
        </td>
      </tr>
    </tbody>
  </table>
    <div class="add-remove">
    <div class="col-md-6 text-center add">
      <a @click="addRoom" class="add-room"> Add Room </a>
    </div>
    <div class="col-md-6 text-center remove">
      <a @click="removeRoom(index)" class="remove-room"> Remove Room </a>
    </div>
  </div>
</div>

脚本是:

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);
    },

    }

  })

jsfiddle 链接是 https://jsfiddle.net/c1ud4mkv/

Answer 1

总价应该是一个计算属性，根据您的数据计算。

更新

由于您需要 x 行，每行重复相同的行为，因此您需要一个代表一行的组件，我称之为保留。您很快就会发现该组件是之前 Vue.js 的复制粘贴。几乎没有任何变化。

现在，顶层的 vue 模板变成了用于创建组件的 for 循环。请注意，组件可以直接引用共享数据(房间)的存储，但必须通过其属性获得其唯一性。

请注意，页面的整个状态由结构合理的存储表示，与 Vue 的内容分开，状态项之间没有依赖关系。因此，计算出的值 totalPrice 不在商店中，而是从存在的值中派生出来的。要构建这样的问题，我会先编写商店，然后再考虑如何显示它。

AddRow 是一种方法，因为它在选定的时间运行，不返回任何内容并更新存储。方法通常将数据向上游推送。 TotalPrice 是一个计算属性，因为我们希望它具有反应性，它在模板中使用，在下游端。

看到它正在运行here .

所以这就是整个事情......

标记

<div id="vueRoot">
  <reservation v-for="myReservation in store.reservations" :reservation="myReservation"></reservation>
  <a class="myPlus" v-on:click="addRow">+</a>
</div>

代码

var vueStore = {
  rooms : [
    {label : 'palatial suite', price : 1000.73},
    {label : 'presidential suite', price : 2000.36}
  ],
  reservations : [{
      selectedRoom : null,
      numAdults : 1,
      numChildren : 0
  }]
};
Vue.component("reservation",{
  template : `<div style="padding:12px">
  Room :
  <select v-model="reservation.selectedRoom">
    <option v-for="room in rooms" v-bind:value="room.price">
      {{room.label}}
    </option>
  </select>
  Number of adults :
  <select v-model="reservation.numAdults">
    <option>1</option>
    <option>2</option>
  </select>
  Number of children :
  <select v-model="reservation.numChildren">
    <option>0</option>
    <option>1</option>
    <option>2</option>
  </select>
  Total Price : {{totalPrice}}
</div>`,
  data : function(){
    return {
      rooms : vueStore.rooms
    }
  },
  props : [ 'reservation' ],
  computed : {
    totalPrice : function(){
      if(this.reservation.selectedRoom){
        return this.reservation.selectedRoom 
          + this.reservation.numAdults * 500 
          + this.reservation.numChildren * 200
      }
      else return '';
    }
  }
});
vm = new Vue({
  el : "#vueRoot",
  data : {store : vueStore},
  methods : {
  addRow : function(){
  this.store.reservations.push({
      selectedRoom : null,
      numAdults : 1,
      numChildren : 0
  })
  }
  }
});