Vue-Select 事件触发器没有 Node.js

Question

我正在使用 Vue.js 和没有 node.js 的 Vue-Select。我将它们直接导入到我的 html 文件中，如下所示：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<script src="https://npmcdn.com/vue-select@latest"></script>

我在 <body> 中定义了一个 v-select 菜单，其中包含一个应调用 hello()

的更改选项

<v-select on-change="hello" :options="['foo','bar','baz', 'asdf']"></v-select>

而vue-Select组件是这样注册的，使用hello()方法；

<script type="text/javascript">

      Vue.component('v-select', VueSelect.VueSelect);

        new Vue({
          el: 'body',
          methods: {
            hello (val) {
              alert(val)
            }
          }
        });

</script>

但是没有任何反应，我在控制台中收到以下错误消息：

vue.js:990 [Vue warn]: Invalid prop: type check failed for onChange="hello". Expected Function, got String.

这是基于vue-select中描述的on-change callback事件documentation...但它不起作用。

我只想在 select 框更改时创建一个事件；即我想将 select 框的值传递给执行某些操作的函数。

Answer 1

由于 code 中有验证，onchange 是一个函数，您应该尝试使用函数语法，如下所示：

  Vue.component('v-select', VueSelect.VueSelect);

    new Vue({
      el: 'body',
      methods: {
        hello: function(val) {
          alert(val)
        }
      }
    });

Answer 2

我相信你的问题出在你的模板上，你需要绑定 on-change 属性否则它只是向实例发送一个字符串。

<v-select v-on:on-change="hello" :options="['foo','bar','baz', 'asdf']"></v-select>

或者如果你喜欢 shorthand.

<v-select @on-change="hello" :options="['foo','bar','baz', 'asdf']"></v-select>

编辑：

好吧，我有点白痴，没有注意到您需要使用 v-bind 或 : shorthand 的绑定方法，如此处 jsFiddle 正在查看github 上的 v-select 代码我注意到他们明确地调用了函数而不是发出它。

所以你的 html 应该是

<v-select v-bind:on-change="hello" :options="['foo','bar','baz', 'asdf']"></v-select>
<v-select :on-change="hello" :options="['foo','bar','baz', 'asdf']"></v-select>

Vue-Select 事件触发器没有 Node.js

Vue-Select event trigger without Node.js

javascript

vue.js

vue-component