Vuejs is throwing an error claiming that a property is undefined, even though the

I have created a Vue component that displays server connection data in a simple format:

<template>
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <div class="page-header">
          <h2 class="title">Data</h2>
        </div>
        <br>
      </div>
      <div class="col-xs-12">
        <table class="table">
          <tr>
            <td>Server</td>
            <td><strong>{{config.servers}}</strong></td>
          </tr>
          <tr>
            <td>Port</td>
            <td><strong>{{config.port}}</strong></td>
          </tr>
          <tr>
            <td>Description</td>
            <td><strong>{{config.description}}</strong></td>
          </tr>
          <tr>
            <td>Protocol</td>
            <td :class="{'text-success': isHttps}">
              <i v-if="isHttps" class="fa fa-lock"></i>
              <strong>{{config.scheme}}</strong>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Application',

  data () {
    return {
      config: {
        scheme: '',
        servers: '',
        port: '',
        description: ''
      }
    }
  },

  computed: {
    ...mapState(['server']),

    isHttps: () => this.config.scheme === 'https'
  },

  mounted () {
    const matched = this.server.match(/(https?):\/\/(.+):(\d+)/)
    this.config = {
      scheme: matched[1],
      servers: matched[2],
      port: matched[3],
      description: window.location.hostname.split('.')[0] || 'Server'
    }
  }
}
</script>

Upon mounting the component, the server variable from Vuex is initialized and I can see the correct URL when running console.log(this.server). However, an error is thrown when utilizing my computed property isHttps:

[Vue warn]: Error in render function: "TypeError: Cannot read property 'scheme' of undefined"

found in

---> <Application> at src/pages/Aplicativo.vue
       <App> at src/App.vue
         <Root>

I've tried renaming config to different identifiers like configuration or details, as well as changing mounted to created, but the error persists and the template fails to render.

Initially, I attempted to make config a computed property, which also resulted in the same error appearing in the console. Additionally, trying to use the store as a computed property such as $store.state.server triggers an error stating that $store is undefined:

server: () => this.$store.state.server

What steps should I take to resolve this issue?

Answer №1

Your use of an arrow function in the isHttps computed property is causing a reference issue. In this context, this refers to window instead of the Vue instance, leading to a

cannot read property of undefined
error message. The correct ES2015 syntax is:

isHttps() { 
  return this.config.scheme === 'https'
}

A similar problem occurs with

server: () => this.$store.state.server
, which should be written as:

server() { 
  return this.$store.state.server
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to replicate table cells in the style of Excel using jQuery?

Excel has a convenient feature that allows cells to be copied by dragging and dropping with the mouse. This same functionality is also available in Google Spreadsheets. I am trying to understand how Google has implemented this feature using JavaScript cod ...

Struggling to configure an onClick handler in Next.js

Unexpectedly, I was met with a surprise while trying to access react.dev, as it stated that create-react-app is no longer recommended for bootstrapping React applications. No worries, the world is always evolving. Let's explore Next.js for my first p ...

Save the user input to a dedicated text file

I am working with a couple of select tags that generate an array. Previously, I was only logging the array to the console upon pressing the SUBMIT button, but now I want to save it to a separate text file. Here is my main.html code: <form method="POS ...

Node.js application for changing attributes in an HTML string

Within my node.js backend, there exists an object with a specific property named content, which stores an HTML string. The content within includes an img tag that currently has a src attribute containing a base64 string. I am seeking to modify this src att ...

Identifying the opening of a folder or file in an electron/node application

Is there a way to retrieve the name of a folder or file when they are opened? I have tried using fs.watch event, but it only seems to work when renaming, adding, or removing files/folders within the specified directory. For instance: //This code only de ...

Is the @vitejs/plugin-vue dependency necessary for my project?

I'm in the process of transitioning a Vue2 project from Vue-CLI/Webpack to Vite. However, I am unsure about whether or not I need to add @vitejs/plugin-vue as a dev dependency as mentioned in this migration guide. Can you clarify if this plugin is nec ...

Divide a list Observable into two parts

In my code, I have an Observable called 'allItems$' which fetches an array of Items. The Items[] array looks something like this: [false, false, true, false] My goal is to split the 'allItems$' Observable into two separate Observables ...

Unable to overwrite class in VueJS component

Recently, I've been encountering an issue with over-riding a specific instance of my VueJS Component. Despite my efforts, the component continues to use the default value. The particular value causing trouble is the buttonClass. Interestingly, the ot ...

Using and accessing Ajax response across all routes in an application

I am developing a Node.js Express API application that requires several AJAX calls at the start of the application for global data access in all requests. At the beginning of my app.js file, I include: var users = require('./modules/users'); I ...

Implementing a Cancel Button in a Form Using Vue.js Bootstrap-Vue

I am trying to implement a cancel button in my code, similar to the reset button functionality, however, the method is not being triggered and the validation for required fields is still taking place. In my NewUser.vue file, I have added the @cancel="onCa ...

Guide to adding a JS file from npm package to a new page in Nuxt.js

I am facing an issue where I have multiple npm packages containing client-side scripts that I need to include in different pages of my Nuxt.js project. I attempted to achieve this by using the following method: <script> export default { head: { ...

Refresh the Server Component once data has been modified by the Client Component within Next.js

I am still grappling with this specific scenario and trying to figure out the best approach in Next.js 13. Can anyone provide guidance on the correct way to handle this? In a Server Component, I have a list of users being displayed, leveraging MongoDB, as ...

How can you efficiently pass multiple JSON files as arguments for Observable Arrays, especially when the values from one file are required for use in another file?

My goal is to utilize $.getJSON to retrieve data from two JSON files and assign their values to observableArrays. Currently, I have hard-coded the JSON data into the observableArray. You can view an example on this JSFiddle link. This was my initial appro ...

Displaying a div when a button is clicked (PHP)

Hello everyone, I'm new to posting here so please bear with me if I seem inexperienced. On my website, there is a button that needs to disappear when clicked and be replaced by a form without refreshing the page. I was able to accomplish this using ...

Vue 2 - Error: The function is not defined at HTMLInputElement.invoker (vue.esm.js?65d7:1810)TypeError: cloned[i].apply

I encountered the following error: Uncaught TypeError: cloned[i].apply is not a function at HTMLInputElement.invoker (vue.esm.js?65d7:1810) I have set up my project using vue-cli (simple webpack), and below is the code for my component: <template ...

Ways to update HTML content generated by Ajax

Having some difficulties modifying the HTML content generated by AJAX. This is the code snippet from the page: @model IEnumerable<WE_SRW_PeerNissen.Models.Reservations> @{ ViewBag.Title = "List"; Layout = "~/Views/Shared/_Layout.cshtml"; } ...

Comparing form submission with a button click to pass data using Ajax - success in one method but failure in the other

I am facing an issue with two pieces of jquery code in my Flask application. While one works perfectly, the other is not functioning as expected. Both the form and a button trigger the same function through ajax calls. Currently, for troubleshooting purpos ...

Is there a way to monitor the home button press event within a PhoneGap application?

Hello! I'm curious if there is a way to track when the Home button is pressed on both Android and IOS using phonegap phonegap build. I have looked into events for the home button press, but have only found information on back button events so far. ...

Having difficulty displaying form errors using handlebars

My form validation is not working properly. When I enter incorrect information, it alerts correctly, but when I submit the form, it returns [Object object]. What could be causing this issue in my code and how should I handle the data? https://i.stack.imgu ...

What is the process for determining the total of elements within an array?

Imagine you have the following array: const items = [ { "amount1": "100", "amount2": "50", "name": "ruud" }, { "amount1": "40", "amount2": "60", "name": "ted" } ] Your goal is to calculate the sum of all amount1 and amount ...