Vue-Select event trigger without Node.js

Question

I am using Vue.js and Vue-Select without node.js. I am importing them directly into my html file like so:

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

I have a v-select menu defined in <body> with an on-change option which should call hello()

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

And the Vue-Select component is registered like this, with the hello() method;

<script type="text/javascript">

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

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

</script>

But alas nothing happens and I get the following error message in console:

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

This is based on the on-change callback event described in the vue-select documentation... but it doesn't work.

I would just like to to create an event when the select box is changed; i.e. I would like pass the value of the select box to a function which does something.

What is the error you get, how are you using it, add that code. — Saurabh
– Saurabh, Commented Feb 1, 2017 at 11:32

Justin MacArthur · Accepted Answer · 2017-02-01 16:14:52Z

1

I believe your issue is in your template, you need to bind the on-change property otherwise it's just sending a string to the instance.

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

or if you prefer shorthand.

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

EDIT:

Ok I'm a bit of a moron not noticing the binding method you need to use v-bind or the : shorthand as seen here jsFiddle looking at the v-select code on github I noticed they're explicitly calling the function instead of emitting it.

so your html should be

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

edited Feb 1, 2017 at 16:14

answered Feb 1, 2017 at 15:00

Justin MacArthur

4,05024 silver badges27 bronze badges

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

3 Comments

Saurabh Over a year ago

That should not be an issue, that's how it is in the documentation as well.

Justin MacArthur Over a year ago

@Saurabh I've yet to see a case where that works the way it shows in that documentation, in the Vuejs.org Event Handling Docs it specifies the need for v-on or the @ shorthand when passing functions or expressions to a callback. As well if you notice the vue-warn @eli gives us is that it was expecting a function and received a string.

Justin MacArthur Over a year ago

I tried making some fiddles to test with Question gives the vue-warn Our Answers don't yet the function isn't called. Which is an oddity

Saurabh · Accepted Answer · 2017-02-01 13:24:23Z

0

As there is a validation in the code, for onchange to be a function, You should try one with function syntax, like following:

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

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

answered Feb 1, 2017 at 13:24

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

3 Comments

eli Over a year ago

I tried this but still get the same error (vue.js:990 [Vue warn]: Invalid prop: type check failed for onChange="hello". Expected Function, got String.)

Saurabh Over a year ago

@eli I am not sure you can do el: 'body, you have to give that div an id, and use that id here, that might tne the issue.

eli Over a year ago

el:body works (the select box is shown) and it's done that way in the vue.js documentation. using a div made no difference

Collectives™ on Stack Overflow

Vue-Select event trigger without Node.js

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related