vuejs:残疾人不起作用

时间:2017-09-21 14:52:54

标签: vue.js

即使条件语句有效,我也无法重新激活按钮。 看起来v模型没有与数据进行通信,但通过简单的插值更新了值。

我真的不知道我在代码上做错了什么。

<template>
    <div class="col-sm-6 col-md-4">
        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">{{stock.name}}
                    <small>(Price: {{stock.price}})</small>
                </h3>
            </div>
            <div class="panel-body">
                <div class="pull-left">
                    <input v-model="quantity" type="number" class="form-control" placeholder="Quantity">
                </div>
                <div class="pull-right">
                    <button class="btn btn-success" @click="buyStock" :disabled="isDisabled">Buy</button>
                </div>
                <p>{{quantity}}</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: [
        "stock",
    ],
    data() {
        return {
            quantity: 0,
        }
    },
    methods: {
        buyStock() {
            const order = {
                stockId: this.stock.id,
                stockPrice: this.stock.price,
                quantity: this.quantity
            };
            console.log(order);
            this.$store.dispatch("buyStock", order);
            this.quantity = 0;
        }
    },
    computed: {
        isDisabled() {
            if (this.quantity <= 0 || !Number.isInteger(this.quantity)) {
                return true;
            } else {
                return false;
            }
        }
    }
}
</script>

1 个答案:

答案 0 :(得分:3)

默认情况下,$ awk -f tst.awk file1 file2 ARS 8.0 8.0 ARS 2.3 2.4 ARS 8.0 8.0 ARS 2.6 2.4 ARS 8.0 8.0 ARS 2.5 2.3 BBL 1.1 1.2 BBL 1.9 1.8 CCL 1.9 1.8 NA NA EDE 1.4 1.6 指令将值绑定为v-model。因此,String计算中的两个检查都将失败。

如果您想将isDisabled绑定为数字,可以像这样添加.number modifier

quantity

这是一个有效的例子:

&#13;
&#13;
<input v-model.number="quantity" type="number" ... >
&#13;
new Vue({
  el: '#app',
  data() {
    return { quantity: 0 }
  },
  computed: {
    isDisabled() {
      return (this.quantity <= 0 || !Number.isInteger(this.quantity)) 
    }
  }
})
&#13;
<template>
    <div class="col-sm-6 col-md-4">
        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">{{stock.name}}
                    <small>(Price: {{stock.price}})</small>
                </h3>
            </div>
            <div class="panel-body">
                <div class="pull-left">
                    <input v-model="quantity" type="number" class="form-control" placeholder="Quantity">
                </div>
                <div class="pull-right">
                    <button class="btn btn-success" @click="buyStock" :disabled="isDisabled">Buy</button>
                </div>
                <p>{{quantity}}</p>
            </div>
        </div>
    </div>
</template>

<script>

</script>
&#13;
&#13;
&#13;