vuejs: deaktiviert funktioniert nicht

Question

Ich habe ein Problem bei der Reaktivierung der Schaltfläche, auch wenn die bedingte Anweisung funktioniert. sah aus, als ob das V-Modell nicht mit den Daten kommunizierte, aber mit einer einfachen Interpolation wurde der Wert aktualisiert.

Ich weiß nicht wirklich, wo ich den Code falsch mache.

<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

standardmäßig die v-model Direktive bindet den Wert als String. So werden beide Checks in Ihrem isDisabled immer fehlschlagen.

Wenn Sie quantity als Zahl binden möchten, können Sie hinzufügen, die .number modifier wie so:

<input v-model.number="quantity" type="number" ... > 

Hier ist ein funktionierendes Beispiel:

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>