Error: Cannot read Property 'Protocol' of Undefined

Question

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 appears this error on 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>

Answer 1

The problem is that when you use the @keyup.enter="Entered" the method Entered 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" there the event.target is already another, and not the input.

It’s best to depend on events to know when the user wants to submit, but trust the value to v-model and wear 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);
  });