Question

我在没有node.js的情况下使用Vue.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 documentation中描述的on-change callback事件......但它不起作用。

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

Answer 1

我相信你的问题在你的模板中，你需要绑定<v-select v-on:on-change="hello" :options="['foo','bar','baz', 'asdf']"></v-select>属性，否则它只是向实例发送一个字符串。

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

或者如果您更喜欢速记。

v-bind

编辑：

好吧我有点傻了没注意到你需要使用:或<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>速记所需的绑定方法，如jsFiddle所示查看v-select代码github我注意到他们明确地调用了函数而不是发出它。

所以你的HTML应该是

{{1}}

Answer 2

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

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

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

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

2 个答案: