How to reset selected value from the dropdown on clicking of clear button in vuejs?

Question

value: 'Select (mm)',
list: ["1mm","2mm","3mm", "4mm", "55mm"],
visible: false,
      
     toggle() {
      this.visible = !this.visible;
    },
    select(option) {
        this.value = option;
    },

<div class="thickness-productlist">CLEAR</div> 
 
 <div class="aselect" :data-value="value" :data-list="list">
        <div class="selector" @click="toggle()">
            <div class="label">
                    <span>{{ value }}</span>
            </div>
            <div class="arrow" :class="{ expanded : visible }"></div>
            <div :class="{ hidden : !visible, visible }">
                <ul>
                    <li :class="{ current : item === value }" v-for="item in list" 
                  @click="select(item)" :key="item">{{ item }}</li>
                </ul>
            </div>
        </div>
    </div>

At present i am having the clear option, Where if i click on it, I want to selected value from the dropdown to get clear.

HijenHEK · Accepted Answer · 2021-05-10 14:16:57Z

1

the dropdown selected value is binded to the value variable so listen to the click event and change it back

<div class="thickness-productlist" @click="value= 'Select (mm)'">CLEAR</div>

edited May 10, 2021 at 14:16

answered May 10, 2021 at 13:34

HijenHEK

1,3061 gold badge6 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to reset selected value from the dropdown on clicking of clear button in vuejs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related