A guide to implementing includes() and indexOf() in Vuetify

Struggling with a code snippet in vuetify, facing issues:

<template>
   ..... {{ countf(options[1], options[2], options[3], options[4], options[5]) }} ......
</template>


<script lang="ts">
export default Vue.extend({

data () {
  return {
    count: 1,
    str: ''
  }
},
   methods: {
      countf(a: any, b: any, c: any, d: any, e: any) {

      this.str = a.title;

        if (this.str.indexOf("Lapel") > -1) {
          this.count++;
        }
        return "Count = " + this.count;
      }
   }
 })
</script>

Seeking assistance to display Count = 2 on the webpage. The issue persists as navigating to the page causes it to hang. Any solutions are appreciated.

Answer №1

Expanding on my previous response: the reason behind your browser freezing is due to the structure of your application causing an infinite recursion loop once rendering is initiated:

  1. During DOM rendering, the countf() method of the component is called
  2. This method increments this.count and returns a different string each time
  3. As a result, the DOM changes trigger re-rendering, looping back to step 1 until the browser exhausts memory

If you want your logic to execute only once, consider calling it in the created or mounted lifecycle hook, saving the output in a string displayed in the DOM. This ensures a one-way data flow.

The example below offers a potential solution. Note that adjustments may be necessary depending on where options is sourced from:

<template>
  ..... {{ countOutput }} ......
</template>

<script lang="ts">
export default Vue.extend({
  data () {
    return {
      count: 1,
      countOutput: '',
      str: ''
    }
  },
  mounted(): {
    this.countOutput = this.countf(this.options[1], this.options[2], this.options[3], this.options[4], this.options[5]);
  },
  methods: {
    countf(a: any, b: any, c: any, d: any, e: any) {

      this.str = a.title;

     if (this.str.indexOf("Lapel") > -1) {
       this.count++;
     }

     return "Count = " + this.count;
    }
  }
})
</script>

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

Converting HTML to an array using Angular

Is there a way to convert HTML into an array of entities? For example: 'hi <em>there</em>' => ['hi', '<em>', 'there', '</em>'] ...

NextJS introduces a unique functionality to Typescript's non-null assertion behavior

As per the typescript definition, the use of the non-null assertion operator is not supposed to impact execution. However, I have encountered a scenario where it does. I have been struggling to replicate this issue in a simpler project. In my current proj ...

(React Native - Expo) The hook array fails to include the most recently selected object

When I attempt to add objects to a hook within a component, it seems to be functioning correctly. However, there is an issue where the last selected object is consistently missing from the updated hook array. This behavior also occurs when removing an obje ...

In Vuejs, display the message "Not Connected" only in cases where the API response is a 'null' string accompanied by a 401 UNAUTHORISED error

I'm a newcomer to Vuejs and I could really use some assistance with this issue. What I want is for my page to display "NOT CONNECTED" when my API returns null with a 401 UNAUTHORIZED STATUS, and "CONNECTED" when it returns a 201 STATUS OK. Unfortunat ...

The UglifyJsPlugin in Webpack encounters an issue when processing Node modules that contain the "let" keyword

Below is the code snippet from my project which utilizes Vue.js' Webpack official template: .babelrc: "presets": [ "babel-preset-es2015", "babel-preset-stage-2", ] webpack.prod.config.js new webpack.optimize.UglifyJsPlugin({ compress: { ...

"Exploring the process of assigning input data to a different variable within a Vue component

Reviewing the code snippet I currently have: <template> <div> <input v-model.number="money"> <p>{{ money }}</p> </div> </template> <script> name: 'MyComponent', data () { ...

Guide on sending a form using Vuejs to interact with Laravel's Controller

I have a Vue.js component serving as my login form and I'm attempting to pass the form data to a Laravel controller similar to how it's done in a blade.php file with <from method="POST" action="login"> and in web.php wit ...

Which data type should be used with the useRef hook for iframes?

Looking to avoid using the any type, but not sure which type definition to use instead for this situation: const iframe = useRef<any>(); <iframe ref={iframe} sandbox='allow-scripts' srcDoc={rootHtml} /> Want Typescript t ...

What is the most effective way to retrieve the coordinates of a specific element in a React TSX component?

Using React alongside Typescript, I am trying to determine how to retrieve the coordinates of a sub-component within a React class that I have created. I came across this article: https://medium.com/@chung.andrew7/finding-the-absolute-positions-of-react-c ...

Navigating Angular QueryList through loops

I am currently trying to gather all the images in my component and store them in an array. To achieve this, I am utilizing Angular's @ViewChildren which returns a QueryList of ElementRef: @ViewChildren('img', { read: ElementRef }) images: Q ...

The file parameter in the upload is consistently undefined in tsoa-swagger

Having trouble with Tsoa nodejs File upload Followed the tsoa documentation for writing the method, but the output variable is consistently undefined This is my current method https://i.sstatic.net/YrNc0.png @Post('/uploadNewExporterTemplate&apos ...

Guide on updating a variable to the following string within an array

Snippet: months = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October&apos ...

Please convert the code to async/await format and modify the output structure as specified

const getWorkoutPlan = async (plan) => { let workoutPlan = {}; for (let day in plan) { workoutPlan[day] = await Promise.all( Object.keys(plan[day]).map(async (muscle) => { const query = format("select * from %I where id in (%L) ...

Utilizing Font Awesome for social icons in a Vue component display

Currently, I'm in the process of building my own website and making the switch from traditional HTML, CSS, and JS to using VueJs. I've hit a roadblock when trying to transfer some code from my original HTML file to a Vue JS component, specificall ...

Using dangerouslySetInnerHTML in ReactJS can potentially strip away data attributes

After adding a data-test attribute to the a anchor tag within an HTML string and inserting it using dangerouslySetInnerHTML, I noticed that the data attributes are somehow being stripped out. Is there a way to prevent this from happening? These attribute ...

What is the reason behind typescript not needing `undefined` with the ?: operator on arrays?

type Artifact = { a:string } const items : Artifact[] = []; // this will result in a syntax error let z?: Artifact; // assigning undefined to a variable of type Artifact is an error const b : Artifact = undefined; // despite expectations, this assi ...

Evaluating Angular/Typescript and its capabilities

I seem to be struggling with the concept of how eval functions in TypeScript/Angular. Can someone provide some guidance on how to make eval work in this scenario? Although the logic may not be perfect in this demo program, I just need help figuring out how ...

Techniques for importing esm libraries without requiring the "type": "module" declaration in the package.json configuration file

I have successfully implemented a TypeScript Node project but now I am facing an issue while trying to integrate the VineJS library into the project. The problem arises because VineJS is exclusively an ESM (ECMAScript Module) package, and when adding it to ...

I am interested in identifying the TypeScript code within my library that is not being utilized. Any suggestions on how to achieve this?

What is the method to enable code lenses for TypeScript and identify sections with 0 references? Shown in this example image, which settings can indicate 0 references (similar to the grey font in the picture)? ...

Single-page website experiencing Bootstrap problem

I've been struggling with creating a card component for array elements in Vue Bootstrap. The goal is to open a modal specific to the clicked element when the header of the card is clicked. However, the issue I'm facing is that clicking on any hea ...