vue.js - 如何根据复选框和输入值递增

Question

我正在尝试创建一个按钮，该按钮将根据输入/选择的复选框和输入值的数量而变化。

例如，我有一个按钮 html，它会根据选择的项目数量而变化

• 购买（已选择 0 件商品）
• 购买 1 件商品（选择/输入 1 件商品）
• 购买 x 件（选择/输入 x 件）

使用当前设置为 0 的 buyCounter 数据变量。我想根据复选框/输入值增加/减少此计数器。

如果选择了一个复选框，则它计为 +1，如果取消选择 -1。

在输入上，它采用输入的任何值并将其添加到计数器中。例如，如果在输入上输入 4，则将 +4 添加到计数器。

目前不关注该数字是否超过允许的数量，实际上只是想弄清楚对应的部分。

我在下面的 codepen 中创建了这个示例，以足够接近我想要实现的目标。任何正确方向的帮助将不胜感激

https://codepen.io/anon/pen/QooWZV?&editable=true&editors=101

模板

<div id="app">
  <v-app id="inspire">
    <v-data-table
      v-model="selected"
      :headers="headers"
      :items="desserts"
      item-key="name"
      class="elevation-1"
    >
      <template v-slot:items="props">
        <td v-if="props.item.available > 1"  style="display:inline-flex">
          <v-text-field style="width:5%; padding-bottom:10px;"></v-text-field> of {{ props.item.available }}
        </td>
        <td v-else>
          <v-checkbox
            v-on:change="increment($event)" 
            v-model="props.selected"
            primary
            hide-details
          ></v-checkbox>
        </td>       
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
      </template>
    </v-data-table>
        <v-layout row wrap class="">
            <v-flex xs4 class="text-xs-left">
            <v-btn  
             v-if="buyCounter < 1" 
             color="blue-grey" 
             class="white--text">
            Buy
            </v-btn>
            <v-btn  
             v-else-if="buyCounter > 0 && buyCounter < 2" 
             color="blue-grey" 
             class="white--text">
              Buy {{ buyCounter }} Item
            </v-btn>
            <v-btn  
              v-else-if="buyCounter > 1" 
              color="blue-grey" 
              class="white--text">
              Buy {{ buyCounter }} Items
            </v-btn>           
            </v-flex>   
            <v-flex xs4 class="text-xs-center">     
            </v-flex>           
            <v-flex xs4 class="text-xs-right">                  
            </v-flex>                                   
        </v-layout>     
  </v-app>
</div>

脚本

new Vue({
  el: '#app',
  data () {
    return {
      selected: [],
      buyCounter: 0,
      headers: [
        {
          text: 'Count',
          align: 'left',
          sortable: false,
          value: ''
        }, 
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name'
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' }
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
          available: 1
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%',
          available: 2
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
          available: 1
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: '8%',
          available: 1
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: '16%',
          available: 3
        },
        {
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: '0%',
          available: 1
        },
        {
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: '2%',
          available: 2
        },
        {
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: '45%',
          available: 1
        },
        {
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: '22%',
          available: 1
        },
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: '6%',
          available: 3
        }
      ]
    }
  },
  methods:{
    increment(event){
        console.log(this.selected);
        const isChecked = event;

        if(isChecked){
            this.buyCounter++;
        }else{
            this.buyCounter--;
        } 

    }
  }
})

希望创建一个按钮来识别将要购买的商品数量。

标签： vue.jsvuejs2vuetify.js