Error: Can not read property 'protocol' of undefined

Question

Error: Can not read property 'protocol' of undefined

Navigation

#1 by (0 votes)

1

Template:

<input type="text" v-model.trim="enterURL" placeholder="Enter URL here" @keyup.enter="Entered">
<v-btn icon @click.native.stop="Entered">
    <v-icon>send</v-icon>
</v-btn>

Script:

Entered(enterURL) {
    this.$emit('Entered', enterURL);
    let an_url = enterURL.target.value;
    if (this.layers_includes(an_url))
        return;

    axios.get(an_url).then(response => {
        let a_layer = new Layer();
        a_layer.enabled = true;
        a_layer.json = response.data;
        a_layer.url = an_url;

        this.layers.push(a_layer);
        L.geoJSON(a_layer.json).addTo(map);
        this.add_layer(a_layer);
    });

Pressing 'Enter' works normally, but with the mouse click on the button this error appears in the console:

Uncaught (in promise) TypeError: Cannot read property 'protocol' of undefined
at isURLSameOrigin (isURLSameOrigin.js?142d:57)
at dispatchXhrRequest (5:109)
at Promise (<anonymous>)
at xhrAdapter (5:12)
at dispatchRequest (26:52)
at <anonymous>

vue.js axios vuetify

asked by anonymous 19.09.2017 / 19:05

1 answer

PDF view in iframe How to make HTTP access available to my apache web service on Linux [pending]

score 0 · Accepted Answer

The problem is that when you use @keyup.enter="Entered" the Entered method receives the event as an argument and the event.target is the input . Then you do let an_url = enterURL.target.value; and everything works. But when you use @click.native.stop="Entered" then event.target is already another, not input .

It's best to depend on events to know when you want to submit, but trust the value to v-model and use it like this:

const an_url = this.enterURL;

The whole code would be:

Entered(enterURL) {
    this.$emit('Entered', enterURL);
    const an_url = this.enterURL;
    if (this.layers_includes(an_url)) return;

    axios.get(an_url).then(response => {
      const a_layer = new Layer();
      a_layer.enabled = true;
      a_layer.json = response.data;
      a_layer.url = an_url;

      this.layers.push(a_layer);
      L.geoJSON(a_layer.json).addTo(map);
      this.add_layer(a_layer);
  });