javascript - 语义 UI Vue JS 更改不起作用或未触发

Question

我从这个 repo 中为 vuejs 使用语义 ui :

repo semantic ui vuewjs

但我找不到如何在选择更改时做某事:

                <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>

我想要实现的是当 sui-dropdown 改变时，用 v-if = currSelectedObject.selectedObjectSearch 显示 sui-segment 并调用一个函数。

直到现在我都试过了:

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

v-on:change 未触发。

vue js 的语义 ui 下拉菜单更改时如何调用函数？

Answer 1

您已使用 v-model 绑定(bind)了 currSelectedObject.selectedObjectSearch，因此当所选值更改时，该变量也会更改。你应该看看。

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