How to auto-close date popup and hide div on selected change of element?

user_1645504 0
Viewed 382

  1. Rent Date doesn't auto close. It’s getting error as below. I'm not sure it's inside of the Div. Getting below error.

    "[Vue warn]: Error in v-on handler: 'TypeError: $refs.qDateProxy.hide is not a function'

  2. Want to hide the RentDate when user select Buy from individual Book’s Select Option. How should I change it? There will be multiple books.

Codepen

  1. To auto close the date popup when user select on the date.
  2. Hide 'RentDate' when user choose
vue.js
1 Answers

You could use v-if or v-show for conditional hide show the Book RentDate on changes of boot type.

The directive v-if is used to conditionally render a block. The block will only be rendered if the directive’s expression returns a truthy value.

<h1 v-if="awesome">Vue is awesome!</h1>

Another option for conditionally displaying an element is the v-show directive. The usage is largely the same:

<h1 v-show="ok">Hello!</h1>

And for this error $refs.qDateProxy.hide, you can create a method and inside of this method you can use like below

 onRentDateChange(){
    this.$refs.qDateProxy[0].hide()
 },

You can check here with working codepen.io.

EDIT

As per OP's comment, I have updated codepen.io. I have taken boolean variable inside of this.$data.Books array and used .find() method of array for changing variable status.

onValueChange(val,id){
   let rec = this.$data.Books.find(({ID})=> ID==id);
   if(rec) rec.isRentShow = val == 'Rent';
},
user_35190090
Related