vuejs：disabledが機能しない

Question

条件文が動作しても、ボタンを再アクティブ化する際に問題があります。 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> 

Answer 1

、v-modelディレクティブはStringとして値をバインドします。したがって、計算されたisDisabledの両方のチェックは常に失敗します。

あなたは数としてquantityをバインドしたい場合、あなたはそのよう.number modifierを追加することができます：あなたのisDisabledされるのはなぜ

new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { quantity: 0 } 
 
    }, 
 
    computed: { 
 
    isDisabled() { 
 
     return (this.quantity <= 0 || !Number.isInteger(this.quantity)) 
 
    } 
 
    } 
 
})

<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>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script> 
 

 
<div id="app"> 
 
    <input v-model.number="quantity" type="number"> 
 
    <button :disabled="isDisabled">Foo</button> 
 
</div>