Topic: mdb input databinding behaving strangely

ksobon pro asked 6 years ago


Is there some magic to mdb input when one wants to do databinding? I got this:
<column lg="2" md="2">
  <div class="text-right icon-div">
    <btn tag="a" color="amber" floating size="lg"><fa icon="minus" @click.native="subtractOne()"></fa></btn>
  </div>
</column>
<column lg="2">
  <md-input v-model="order.quantity"></md-input>
</column>
<column lg="2" md="5">
  <div class="text-left icon-div">
    <btn tag="a" color="amber" floating size="lg" @click.native="addOne()"><fa icon="plus"></fa></btn>
  </div>
</column>

it's bound to a property on a view model like so:
 
data() {
  return {
    order: {
      total: function() {
        return this.product.price * this.quantity;
      },
      product: {
        price: 0,
        selected: 'Free'
      },
      term: {
        price: 0,
        selected: 1
      },
      support: {
        price: 0,
        selected: 'Standard'
      },
      quantity: '0',
      duration: 1
    }
  };
},

addOne: function() {
  console.log(this.order.quantity);
  this.order.quantity = (parseInt(this.order.quantity) + 1).toString();
},
subtractOne: function() {
  console.log(this.order.quantity);
  const value = parseInt(this.order.quantity);
  if (value === 0) return;

  this.order.quantity = (value - 1).toString();
}

now, the behavior is strange because when I refresh my page and input is set to 0 initially,  I can hit the + and - buttons and the values get updates so does the input shown.
However, when I click on the input itself, enter a value manually let's say 100, and then go back to click the +, the underlaying DOM object value gets updated, but the md-input displayed/rendered doesn't. Did entering the value into the input, somehow removed the v-model binding? Cheers!

ksobon pro commented 6 years ago

Ps. When I replace md-input with a regular input then it all works just fine and data binding is not an issue.

Jakub Mandra staff answered 6 years ago


Hello,
Thanks for posting, I did some investigation about and found out that v-model does not work with mdb-input.
You can use classes instead for now in normal input, we will do some work to repair this bug.

<div class="md-form">   
  <input type="text" class="form-control" v-model="order.quantity" />
</div>

Best regards,
Jakub from MDB



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags