Vue: I cannt use v-model in customs components.

[gocanto]

I just updated my app to vu2 and it happens to be that I cannt use v-model in my component:

here is the example: https://github.com/gocanto/google-autocomplete/blob/master/src/js/Components/googleAutocomplete.vue#L148

This is the warning

Property or method "address" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in component

thanks

[fnlctrl]

Hi, thanks for filling this issue, please provide a repro on jsfiddle/codepen etc. Thanks!

[LinusBorg]

In the example you linked, the v-model and the data() function look fine, but outside of thatyou are using deprecated Vue 1.0 functionality everywhere.

• ready()
• v-el
• debounce
• $dispatch

Please clean up your code with Vue 2.0 copatible syntax and see if the problem persists.

https://vuejs.org/guide/migration.html

[posva]

Closing since this looks more like an usage question. I encourage you to follow @LinusBorg instructions and if you're still having trouble, open a topic on the forums: forum.vuejs.org

[gocanto]

this is my actual component. The one showed yesterday was jus referentially.

<script>
    export default {

        props: ['class', 'placeholder'],

        data: function()
        {
            return {
                address: ''
            }
            // return {
            //  //input bound to autocomplete
            //  'address': '',
            //  //google autocomplete object
            //  'autocomplete': '',
            //  //google inputs retrieved
            //  'inputs': {
            //      route: 'long_name',
            //      country: 'long_name',
            //      administrative_area_level_1: 'long_name',
            //      locality: 'long_name',
            //      postal_code: 'short_name'
            //  },
            //  api: {
            //      domain: 'https://maps.googleapis.com/maps/api/js',
            //      key: 'AIzaSyBDBrWOEiYNTbOp05CoWBGuq4hIwAA6yEs',
            //      libraries: 'places'
            //  }
            // };
        },

        mounted: function ()
        {
            console.log('mounted');
            window.onload = this.loadScript(
                this.api.domain + '?key=' + this.api.key + '&libraries=' + this.api.libraries,
                this.bindAutocomplete
            );
        },

        /**
         * Controls the address changes to send them to
         * the listeners.
         * @return void
         */
        watch: {
            // address: function ()
            // {
            //  this.$emit('setAddress', this.address);
            // }
        },

        methods:
        {
            /**
             * Load google class for a given library.
             * @param  src
             * @param  callback
             * @return void
             */
            // loadScript: function(src, callback)
            // {
            //  var script = document.createElement("script");
            //  document.body.appendChild(script);

            //  if (callback)
            //      script.onload = callback;

            //  script.src = src;
            // },

            // /**
            //  * Bind autocomplete to its property.
            //  * @return void
            //  */
            // bindAutocomplete: function ()
            // {
            //  this.autocomplete = new google.maps.places.Autocomplete(
            //         this.$refs.complete,
            //         {
            //             types: ['geocode']
            //         }
            //     );

            //     this.autocomplete.addListener('place_changed', this.pipeAddress);
            // },

            // /**
            //  * Look up places and dispatch an event.
            //  * @return void
            //  */
            // pipeAddress: function ()
            // {
            //  var data  = {};
            //  var place = this.autocomplete.getPlace();

            //  if (place.address_components !== undefined) {

            //      for (var i = 0; i < place.address_components.length; i++) {

            //          var input = place.address_components[i].types[0];
            //          if (this.inputs[input]) {

            //              data[input] = place.address_components[i][this.inputs[input]];
            //          }
            //      }

            //      data = JSON.stringify(data);
            //      this.$emit('setAddress', JSON.parse(data));
            //  }
            // },

            // /**
            //  * Get the user location.
            //  * @return void
            //  */
            // geolocate: function()
            // {
            //  if (navigator.geolocation) {

            //      var vm = this;
            //      navigator.geolocation.getCurrentPosition(function(position)
            //      {
            //          var geolocation = {
            //              lat: position.coords.latitude,
            //              lng: position.coords.longitude
            //          };

            //          var circle = new google.maps.Circle({
            //              center: geolocation,
            //              radius: position.coords.accuracy
            //          });

            //          vm.autocomplete.setBounds(circle.getBounds());
            //      });
            //  }
            // }
        }
    };

</script>

<template>
    <input
        ref:complete
        type = "text"
v-model = "address"
    >
</template>

The console.logthat I have in the mounted method is not even fired!

thanks

[posva]

You will be better off asking the question on the forums 😉

[sirlancelot]

Forums

[gocanto]

I appreciate your help.

I just want to leave this up here, so anyone who may having this problem can take it as a reference.

---

I just needed to uninstall the elixir compiler for vue 1.* and install the new one. The problem was, I installed and started using the new version without uninstalling the old one.

Again, thanks..