CODEWITHSUNDEEP
javascriptvue.jssemantic-ui
yozawiratama
yozawiratama

Reputation: 4318

Semantic UI Vue JS on change not working or no fired

I use semantic ui for vuejs from this repo :

repo semantic ui vuewjs

but i cant find how to do something when selectedchanged :

                <div class="ui segment">
                    <sui-dropdown fluid :options="objects" placeholder="Select Symptom" search selection v-model="currSelectedObject.selectedObjectSearch" />
                </div>
                <sui-segment v-if="currSelectedObject.selectedObjectSearch">
                    <sui-list divided relaxed>
                        <a is="sui-list-item" v-for="item in  items" >
                            <sui-list-content>
                                <sui-list-header>{{item.name}}</sui-list-header>
                                {{item.desc}}
                            </sui-list-content>
                        </a>
                    </sui-list>
                </sui-segment>

what i want to achieve is when sui-dropdown changed, show the sui-segment with v-if = currSelectedObject.selectedObjectSearch and call a function.

untill now i tried this :

    <sui-dropdown 
fluid :options="objects" 
placeholder="Select object" 
search 
selection 
v-on:change="searchObjectBySelected" 
v-model="currSelectedObject.selectedObjectSearch" />

v-on:change not fired.

how to call a function when selected changed with semantic ui dropdown for vue js?

Upvotes: 1

Views: 998

Answers (1)

Roy J
Roy J

Reputation: 43881

You have bound currSelectedObject.selectedObjectSearch using v-model, so when the selected value changes, that variable will change. You should watch it.

watch: {
  'currSelectedObject.selectedObjectSearch': function() {
    // Do something here.
  }
}

Upvotes: 3

Related Questions