Encountered an error in Vuejs: TypeError - Attempting to access the 'add' property of an undefined variable

An error is occurring at the line "word.classList.add('tag')". When I initially tried adding a class here using "if (word.includes('@')) {}", I encountered the same error. This led me to believe that I needed to push words into a new array and loop through them again, but it seems that the issue lies elsewhere.

export default {
  data() {
    return {
      tweets: [],
      currentPage: 1,
      numberOfPages: 0,
      showPagination: 5,
      newPage: 0,
      text: [],
      arrayOfWords: [],
    }
  },
  methods: {
      getTweets(newCurrent) {
      this.tweets = []
      const API_URL = `${this.$server}/api/twitter/tweets`

      const params = {
        token: getUserToken(),
        page: this.$route.query.page,
        newCurrentPage: newCurrent,
      }
      axios.post(API_URL, null, { params }).then(res => {
        this.currentPage = res.data.page
        this.numberOfPages = res.data.numberOfPages

        res.data.tweets.forEach(tweet => {
          const tweetData = {
            id: tweet.id,
            tweet_text: tweet.tweet_text,
            twitter_name: tweet.twitter_name,
            twitter_username: tweet.twitter_username,
            added_at: moment(String(tweet.added_at)).format('MM/DD/YYYY hh:mm'),
          }
          this.tweets.push(tweetData)
          this.text.push(tweet.tweet_text)
        })

        this.tweets.forEach(tweet => {
          tweet.tweet_text.split(' ').forEach(word => {
            if (word.includes('@')) {
              this.arrayOfWords.push(word)
            }
          })
        })

        this.arrayOfWords.forEach(word => {
          word.classList.add('tag')
          console.log(word)
        })
      })
    },
  }

Answer №1

term is a term that I believe does not have a classAttribute, but feel free to imbue it with a classAttribute as desired

term.classAttribute = term.classAttribute || []

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

Angular is a programming framework that uses pipes to place an underscore below a

In order to get the first letter and add an underscore underneath, you can use the following code: import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'underlineFirstLetter' }) export class underlineFirstLetterPipe im ...

Apply bold formatting to the HTML text only, leaving the EJS variable untouched beside it

https://i.sstatic.net/X36eG.png Is there a way to format the text for "Guest signed up" and "Guests attended" in bold while keeping the values normal? Here is my current code: <li class="list-group-item">Guests signed up: <%= guestSignu ...

Tips for accessing a variable value within a JavaScript function

I am currently facing an issue where I am unable to retrieve a variable from a JavaScript function and use it outside of the function. While I can successfully output the variable value inside the function, I am struggling to access it elsewhere in my sc ...

What is the alternative for watchEffect in VueJS 2?

Once my VueJS 2 component loads, I fill a props variable with data. Here's how it's done: created() { this.events = null Service.getEvents() .then(response => { this.events = response.data }) .catch(error =& ...

What could be causing my button to not display within the li element?

I need to insert a delete button (deleteButton) into an <li></li> element that is created and added before the <ol> Here is my code: let eventList = []; const inputBox = document.querySelector('.input-field'); const submit = ...

Exploring Next.js: Leveraging fetch to retrieve data in getServerSideProps and passing it to the client via query parameters

I'm utilizing a getServerSideProps function on the directory page. pages/catalog/index.js export async function getServerSideProps(ctx) { const response = await fetch( `http://someDomen.com/api/ipro/catalog?${ctx?.query?.page ? `page=${ctx.quer ...

What could be causing three.js to not function properly for me within the NetBeans IDE?

I have recently been experimenting with the three.js library in Notepad+ and Chrome, but now I want to transition to using it within NetBeans IDE. My attempt to import it into NetBeans by adding <script type="text/javascript" src="js/three.js"></ ...

Discovering a way to retrieve dropdown data when the dropdown value is changed

Can you please help me with loading dropdown data based on the value selected in the dropdown menu? I am trying to use this tutorial to create linked dropdowns: - This is the link I am referring to. When I choose the first option (ZILA SAHAKRI BANK LIMI ...

Can JavaScript's Gamepad API be used to register a custom game controller?

Background Story Working on a virtual reality app with A-frame to showcase VR gadgets. Custom controllers connect via websocket/bluetooth and we want them compatible with tracked-controls. These components use Gamepad API for model positioning and are fri ...

Organize array elements based on their values - using javascript

I am currently exploring the most effective approach to divide an array into multiple arrays based on specific operations performed on the values within the array. Imagine I have an array like this: var arr = [100, 200, 300, 500, 600, 700, 1000, 1100, 12 ...

Is there a way to separate a string using two different delimiters?

Here is my code snippet : <template> ... <p v-for="club in clubs">{{club}}</p> ... </template> <script> export default { data: () => ({ clubs: '' }), mounted () { let dataClub = "- ...

When working with Angular, encountering circular dependencies can occur when utilizing providedIn alongside forRoot

Currently, I am in the process of developing an angular library that includes an internal service. The service is defined as follows: I have utilized providedIn to ensure it is tree-shakable and did not opt for providedIn:'root' as it is solely u ...

Transferring information using "this.$router.push" in Vue.js

I'm currently developing a restaurant review project using Django REST and Vue.js. To ensure uniqueness, I have adopted Google Place ID as the primary key for my restaurants. The project also incorporates Google Place Autocomplete functionality. The ...

Is it possible to have a div set to close upon loading the page?

Is there a way to have the toggle function set up so that when the page loads, the div being toggled starts out closed? I don't want them to be visible until clicked on. Best regards, Joey <script type="text/javascript> $(document ...

Incorporate the Sequelize model into a Vue.js project

I am currently in the process of developing a CRUD application using electron, vuejs, and sequelize. I have already initialized Sequelize and configured the .sequelizerc file as shown below: const path = require('path'); module.exports = { &a ...

AngularJS modal behaving oddly when checkboxes are used

My Angular app is available in this plunker. Upon clicking the button, a modal dialog opens displaying a list of items. Two of these items are pre-checked based on conditions set in the checkbox table input. The following function handles pushing and spl ...

Integrate JSON data into your JavaScript code using d3.js

Having trouble uploading a .json file to my personal website that is needed to be read by JavaScript code. The goal is to include the data from the .json file in the body of the website. This is the code I am currently using to read and utilize the .json ...

The button attached to the jQuery .toggle() function requires two clicks to activate

My objective is twofold: To dynamically load the Disqus script embed.js only when the "Show Comments" button is clicked. To toggle the visibility of the disqus_thread div using the same button while also changing the button's text. The issue I am f ...

Does .NET MVC provide the necessary separation of HTML/CSS/JS for my project?

Currently, I am collaborating with my ASP.NET development team in an effort to improve the quality of our HTML output. We are facing challenges due to ASP.NET's tendency to insert JavaScript directly into the page, creating dependencies on JS for form ...

Select AngularJS Controller based on Attribute

I am currently developing a dashboard using AngularJS and have implemented a "widget" directive. The issue I am facing is that the widget can belong to one of several types, which is determined by a specific property within the directive. When it comes to ...