The attribute 'includes' is not found in the data type 'RouteRecordName'

Currently experiencing difficulties with using array includes in conjunction with TypeScript. Numerous sources suggest adding the ES2016 lib option (or higher) to tsconfig.json. Despite trying various combinations of lib and target settings, none have proven effective.

Experimented with options such as ES2016.Array.Include, ES2016, ESNext.Array, and ESNext individually and collectively, but to no avail. Also attempted altering the target setting without success, utilizing the tsconfig.json configuration recommended for Vue.

Contemplating alternate approaches aside from includes, or is this possibly a TypeScript "issue"?

https://i.sstatic.net/hRpMF.png

Error-inducing code snippet:

import { useRoute } from 'vue-router'

const isRead = computed(() => {
    route.name!.includes('create') || route.name!.includes('edit') ? false : true
})

tsconfig.json

{
  "compilerOptions": {
    // "noImplicitAny": true,
    "allowJs": true,
    "outDir": "build",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "jsx": "preserve",
    "jsxImportSource": "vue",
    "noImplicitThis": true,
    "strict": true,
    "verbatimModuleSyntax": true,
    "target": "ESNext",
    "useDefineForClassFields": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true,
  },
}

Answer №1

According to the guidance provided in the documentation for Vue Router API, RouteRecordName can be either a string or a symbol. If, at runtime, the value of route.name turns out to be a symbol, using the includes function would lead to an error. TypeScript helps in addressing this issue during compile time.

If you are certain that route.name will always be a string during runtime, you can use type coercion to inform TypeScript about its type.

const isRead = computed(() => {
  return (route.name as string).includes('create') || 
    (route.name as string). includes('edit') ? false : true
})

If there is uncertainty regarding the type of route.name, you can verify if it's a string by checking with typeof first.

const isRead = computed(() => {
  if (typeof route.name === 'string') {
    return route.name.includes('create') || route.name.includes('edit')
      ? false
      : true
  } else return false
})

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

Tips for silencing the microphone on vue-webrtc

Currently, I am utilizing the vue-webrtc component from here. My objective is to create a button that allows me to mute my local microphone, as well as another button to unmute it. Can anyone provide guidance on how to achieve this functionality? I am at ...

The issue with Node module @kenjiuno/msgreader is that it is unable to find the constructor for MsgReader

I've been having trouble getting the example code for parsing Outlook .msg files using @kenjiuno/msgreader to work. Despite successfully installing the module with npm, my code doesn't seem to function as expected: const fs = require('fs&apo ...

There seems to be a malfunction with the hide and reset features, as they are

I have encountered an issue while working on hiding a series in Google Charts when clicked on the legend. The problem arises when an extra column is added to display tooltips on the bars, causing the functionality to break. Please check out the demos below ...

Retrieve a DOCX file via AJAX response

I am encountering an issue with a Django function that returns a file: ... return FileResponse(open('demo.docx', 'rb')) I am using ajax to fetch it on the client side. Now, I need to download it on the client side. This is the code I a ...

Editable content tag

Is there a way to set the maximum number of rows in the contenteditable attribute? I would like to limit users once they reach the character capacity for sending data via POST method. I am currently working with HTML 5. Contenteditable is a new attribute ...

Storing and retrieving text in a file using JavaScript: A step-by-step guide

I have a command set up where if a user is mentioned, the discord bot will save the mentioned user's name in a file (I'm utilizing discord.js and node.js). Below is my code snippet: const prv = require('C:/Users/Kikkiu/Desktop/prova.txt&apo ...

Cleaning up unnecessary brackets and excess data in a JSON object using JavaScript

Currently, I am utilizing the following function to parse an XML file: function xmlToJson(xml) { var attr, child, attrs = xml.attributes, children = xml.childNodes, key = xml.nodeType, obj = {}, i = -1, o = 0; ...

What are the benefits of incorporating 'i in array' into my personalized 'array.indexOf' function?

I've come across code like this multiple times: function customArrayIndexOf(item, array){ for (var i = 0, l = array.length; i < l; i++) { if (i in array && array[i] === item) return i; } return -1; } But I'm unsur ...

Parse the text data and transform the parsed data into JSON format

My task involves processing a string variable msg.payload, which contains the following information. Hi Team, Below are the details of for the given source platform. name=abc status=Active company=Discovery FromDate=6/05/2020 ToDate=20/05/2020 Please do t ...

Transforming Data into Columns with ES6 and TypeScript Using Index Signatures

Seeking a solution to transform/pivot the given data structure: const dataReceived: IOrder[] = [ {customerName: 'Customer 1', customerId: '1',auctionName: 'Auction 1', auctionId: '1', statusName: 'Awaiting&a ...

What is the best way to successfully implement multiple post requests using Django and Ajax on a single webpage?

After spending the entire day struggling with this issue, I am still unable to make any progress. Let me explain my predicament. In my Django form, I have two fields: redirect_from and redirect_to. The form contains two buttons: Validate and Save. Initial ...

Having to click the update button multiple times for a Vue-chartjs chart with method parameter can be

In an attempt to enable users to display different charts by sending the id of the chosen chart to the fillData method, I have encountered several issues with the current code. One problem is that after a chart is loaded, it requires two clicks of the othe ...

Error: Linux version 4.4.0-43-generic

After attempting to install npm with nodejs, I encountered an error that I can't seem to resolve. Despite my efforts and even trying linuxbrew, the issue persists. Any advice on how to overcome this obstacle? npm ERR! Linux 4.4.0-43-generic npm ERR! ...

Obtaining Data from a Database Using Angular

I have developed a front-end website using Angular as my framework, integrated with node.js. To interact with the database, I created a "server.ts" file and connected it successfully to my DB. Now, my goal is to fetch data from the database and display i ...

Modifying the charCode value associated with the pressed key

In the code snippet below, I am trying to modify the charCode of the pressed key, but it doesn't seem to work. My intention is to have the letter "a" output as "b" when pressed. Can anyone spot what I am doing incorrectly? $("#target").keypress(funct ...

Exploring the depths of Master-Detail functionality with Ionic and Angular, unlocking nested

Hey there! I'm currently working on a project using Ionic and Angular, where users can view events and see all the attending participants along with their information. To achieve this, I implemented a master-detail pattern within another master-detail ...

Angular 5 (ionic 3) does not support the FormControl debounceTime feature

Recently, I upgraded Angular in my Ionic app from version 4 to 5. In the app, I have search FormControl inputs that allow users to search a database through ajax requests. Previously, I used the debounceTime() method to delay the ajax search request. Howev ...

Encountering issues with scope: Unable to retrieve value and receiving an error message stating 'Cannot assign value to undefined property'

var mainApp = angular.module("Main", []); mainApp.controller("CtrlMain", [ function ($scope) { $scope.amount = 545 }]);` var app = angular.module("Main", []); app.controller("MainCtrl", [ function ($scope) { $scope.value = 545 ...

The dropdown menu is not able to retrieve information from the secondary database

I have been encountering multiple challenges while working on a web-based dynamic form that I am developing. My current major issue is with populating the second #bodytype dropdown based on the selection made in the first, #bodyman, dropdown. Subsequently ...

What is the method to access nested JSON data returned from the Angular JS $http service?

Here is the main JSON file I am using { "chartType" : ["column", "column", "pie"], "chartTitle": ["Number of teams", "Number of consumable items","Number of employees in charge"], "yAxisTitle": ["Teams", "Consumables", "Employees"], "seriesName": ...