Error: The component passed is invalid and cannot be defined within kendo UI

Check out this example https://www.telerik.com/kendo-vue-ui/components/grid/ showcasing a computed method

gridSearchMessage() {
      return provideLocalizationService(this).toLanguageString(
        "gridSearch",
        "Search in all columns..."
      );
}

This piece of code uses OptionsAPI. I am interested in converting it to CompositionAPI like so:

const gridSearchMessage : ComputedRef<string> = computed<string>(() => {
      return provideLocalizationService(this).toLanguageString(
        "gridSearch",
        "Search in all columns..."
      )
    })

However, when I make this change, I encounter an error. Can anyone explain why this is happening? Interestingly, by simply adjusting the method to:

const gridSearchMessage : ComputedRef<string> = computed<string>(() => {
      return "Search in all columns..."
    })

everything functions as expected.

Answer №1

This represents the component instance and is specifically accessible in the Options API.

However, for the Composition API, you will need to utilize the getCurrentInstance function from the vue Module.

import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
const gridSearchMessage : ComputedRef<string> = computed<string>(() => {
      return provideLocalizationService(instance).toLanguageString(
        "gridSearch",
        "Search in all columns..."
      )
    })

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

Nuxtjs component fails to hot reload when v-if condition is modified

I am facing an issue with my navbar component which consists of two buttons, "Logout" and "Dashboard", that are visible only when the user is authenticated using v-if condition. The problem arises when the user clicks on the Logout button as the navbar do ...

Adding Google Map V3 markers dynamically through jQuery

I have been using jquery and the Google Maps V3 API to dynamically add markers to my Google Maps. Whenever I click on the button search_button, an AJAX request is sent to the server, which returns a JSON array of LatLng values corresponding to the results. ...

What is the reason behind being able to use any prop name in a React function without explicitly mentioning it?

Currently, I'm delving into the world of mobX-state-tree, and in the tutorial code that I'm exploring, there is an interesting piece that caught my eye. const App = observer(props => ( <div> <button onClick={e => props.store. ...

Implementing a universal header using ofetch in Nuxt 3

The objective is to establish a universal header for all outgoing queries Given the latest recommendation to avoid using axios in Nuxt 3, I decided to transition to Nuxt 3's ofetch. However, it seems that the Nuxt 3 team did not include an option to ...

Retrieve data from the table and dropdown menu by clicking a button

A script is in place that retrieves data from two columns (Members, Description) dynamically from the table upon button click. Table html Here is the JQuery code responsible for extracting values from the table: $(function() { $('#myButton') ...

I Am unable to locate the '...' after applying the text-ellipsis style to a div

https://i.stack.imgur.com/Tsmf5.png The ellipsis '...' is not showing up even after I have applied text-ellipsis, overflow hidden, and nowrap to this div. Take a look at my code: import Image from "next/future/image"; import Link from ...

Executing Sequential Jquery Functions in ASP.Net

I have successfully implemented two JQuery functions for Gridview in ASP.Net 1. Enhancing Gridview Header and Enabling Auto Scrollbars <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script& ...

Vue (Gridsome) App encountering 'Cannot POST /' error due to Netlify Forms blocking redirect functionality

Currently, I am in the process of developing my personal website using Gridsome. My goal is to incorporate a newsletter signup form through Netlify Forms without redirecting the user upon clicking 'Submit'. To achieve this, I utilize @submit.prev ...

When utilizing the tab key on Chrome, the iFrame fails to scroll

We are currently facing an issue with our web application that is embedded inside an iFrame. On one of our HTML pages, there are numerous textboxes with a large amount of content, requiring users to scroll down to navigate through it all. When using the ...

What causes the function to return null when using router.get('/:x',..), whereas router.get('/foo/:x',...) works perfectly fine?

After weeks of struggling to identify the root cause of my issue, I finally pinpointed it. Now, I'm curious to understand the reason behind this behavior. I constructed an api for my mongodb server following the techniques I learned in school, utiliz ...

Adding Vuetify to your Astro project is a breeze!

Struggling with integrating Vuetify 3 into Astro using Vue integration. Here's my current setup: import { defineConfig } from 'astro/config'; import vue from '@astrojs/vue'; import vuetify from 'vite-plugin-vuetify'; / ...

Struggling to fix the npm install pre-gyp error

I'm currently in the process of setting up this application on my m1 MacBook Air > Github - Todoist Clone When I run npm install in the terminal, I encounter the following error. Please refer to the log below: 10630 verbose node v16.13.2 10631 ver ...

Encountering a React error when attempting to generate a URL for an image in Sanity

Server Error Error: The asset reference 'e173af30-fd2d-42ed-a364-d92a2cddf32c' is malformed. It should be in the format of an id such as "image-Tb9Ew8CXIwaY6R1kjMvI0uRR-2000x3000-jpg".https://i.stack.imgur.com/koC26.png https://i.stack.imgur.com/ ...

Verify the presence of a particular attribute in an HTML tag using Capybara and polling techniques

In my HTML code, the attributes of buttons (such as "AAAAA") will change based on external events. This real-time update is achieved through AJAX pooling. <div class="parent"> <div class="group"><button title="AAAAA"/></div> <di ...

Show the dropdown menu with names from the array in the ajax response

<html> <select name="cars"> <option value="34">Volvo XC90</option> <option value="54">Saab 95</option> <option value="12">Mercedes SLK</option> <option value="10">Audi TT</option> </select> ...

Implementing Github Oauth2 in a Rails server independent from a chrome extension

Looking to implement Github Oauth2 from my chrome extension, but rather than using chrome.identity.launchWebAuthFlow I want to handle it through my server. This way, I can avoid exposing my client ID and Client Secret in the javascript of the extension. My ...

Is there a way to customize the primary column in Material-table?

I am utilizing the Material-table and I am in need of rearranging the column index to be at the end of the table as the default position for this column (actions) is at the beginning. Here is the code snippet for the table: <MaterialTable title=" ...

Error: Callstack Overflow encountered in TypeScript application

Here is the code snippet that triggers a Callstack Size Exceeded Error: declare var createjs:any; import {Animation} from '../animation'; import {Events} from 'ionic-angular'; import { Inject } from '@angular/core'; exp ...

An interesting approach to utilizing toggle functionality in JQuery is by incorporating a feature that automatically closes the div when

Currently, I am utilizing JQuery's toggle function to slide a ul li element. However, my desired functionality is for the div to close if someone clicks outside of it (anywhere on the page) while it is in the toggle Down condition. Below, you'll ...

Digital Repeater and Angle Measurer

Seeking Guidance: What is the recommended approach for locating the Virtual Repeaters in Protractor? A Closer Look: The Angular Material design incorporates a Virtual Repeater to enhance rendering performance by dynamically reusing visible rows in the v ...