Having trouble retrieving directive parameters in Vue.js?

Vue.directive('customselect', {
  params: ['selectedTask'],
  bind: function () {
    var that = this;
    $(this.el)
      .select2()
      .on('change', function () {
        that.set(this.value);
        if (!this.name.match(/[a-z]/i)) {
            console.log('selected-task->'+that.params.selectedTask); // selected-task->undefined
        }
      })
  },
});

Is there a way to access the params.selectedTask during the onchange event? I attempted using this.params.selectedTask, however it still returns undefined.

Answer №1

Perhaps you could try sharing your HTML code so we can better identify the issue.

It appears that your HTML attribute name may be incorrect. In Vue.js, attributes should be in "camelCase", whereas in HTML they are in "kebab-case". You can try changing it like this:

<span task-id="i am id" v-selecttwo >

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

Module not found in Node.js Express JS

I've read several topics on this issue here at stackoverflow, but I am still unable to get my node application running. When I try to run the command: node app.js local I receive the following error: Error: Cannot find module './config' ...

Using AngularJS for AJAX operations with dynamic PHP variables

I have an AngularJS code that is looping through an AJAX JSON response like this: <div ng-repeat="post in posts"> {{post.title}} {{post.url}} </div> It's working fine. How can I pass a PHP variable based on the JSON? Let's assume t ...

What is the best way to update the content of a modal using jQuery and AJAX?

Despite previous inquiries on this matter, none of the answers provided have been helpful to me. Therefore, I am addressing the issue again... I am currently developing the frontend of a website that does not involve any backend functionality (no server c ...

The element is currently unavailable as it has not been displayed on the screen. How can we effectively wait for its rendering

Within my Vue application, there is an image element with a bound src attribute located in a stepper. The user selects an image to upload in one step, and in the next step, the chosen image is displayed (which functions correctly). However, when attempting ...

issue with AJAX POST request not functioning correctly upon form submission

Having an issue with Ajax post while trying to submit a form event. I am working with a table that is generated by opentable.php. Here is the code for opentable.php: <?php session_start(); require("dbc.php"); $memberid = $_SESSION['memberid' ...

Utilizing Radio buttons for validation in react-hook-form

After creating a form with radio buttons and implementing validation using React Hook Form, I encountered an issue where the console always displayed "on" regardless of the selected radio button. <div className=""> <label ...

Incorporate an Ajax request onto an existing link within a div element

Here is what I have: <div id="div-for-ajax-onclick"> <a href="http://www.google.com">Link to google</a> </div> $("#div-for-ajax-onclick").click(function() { // update database }); I am looking for a solution where if someone c ...

Bot in Discord designed to provide varying tiered rewards for designated roles on payday

I'm trying to configure the bot to distribute different amounts of payment to various roles. However, no matter what I attempt, it keeps indicating that the role is undefined. Being new to JavaScript and coding in general, I've researched this ...

Creating a Custom FlatList Content Container with React Native

Is it possible to customize FlatList items with a custom component? I want to create a setup where my FlatList items are encapsulated within a custom component similar to the following: <ScrollView pt={8} px={16} pb={128} > <Card e ...

Adding a class to the body depending on the tag or href that was clicked on the previous page

Currently, I am working on two pages - the "Home-Page" and the "Landing-Page". My goal is to customize the content of the "Landing-Page" based on the button clicked on the previous page (which happens to be the "Home-Page"). Initially, I tried using ancho ...

Guide to accessing a newly opened window from a different domain originating from the current window

Currently working on an Angular project, I am facing a scenario where I have a link on page A that directs users to a different origin page B. The HTML code for the link is shown below: ... <a href="https://another.origin"> PAGE B </a> ... On ...

Guide to executing a server-side FUNCTION within a specific namespace room exclusively with the help of socket.io, express, and node.js

I've been developing an online multiplayer game using socket.io, express, and node.js. The server is supposed to detect the number of users connected to a specific room within a namespace and start the game if there are more than two players. However, ...

Next.js and Material UI - issues with dynamic styles not functioning

I recently started using Next JS in combination with Material UI, following the example project setup provided in the documentation on Github: https://github.com/mui-org/material-ui/tree/master/examples/nextjs My main objective is to utilize Material UI&a ...

The Ajax function effortlessly receives the returned value and smoothly transitions to the error handling stage

When trying to retrieve data from an ajax request, my function needs to receive the returned data as an array of strings. During debugging, I am able to see the response, but at the same time, the error function is triggered. This is how my code looks: ...

Issue encountered during production mode compilation: "Vue Laravel Mix" is not a valid function

I'm working on a Laravel, VueJs, VueRouter, Vuex application that utilizes Webpack for compiling assets. Here's my package.json file: { "private": true, "scripts": { "dev": "npm run development", "development": "cross-env ...

After modifying environment variables in Vue.js, the application still refers to the previous values

Currently, I am working on a Vue.js project where I have a .env.development file with various VUE_APP_* environment variables. Despite changing the values of some variables, the Vue.js code continues to reference the previous values. I have attempted mult ...

Revamping reactivity for component props in Vue 3

Within my EditTransaction component, I am calling it in the following manner: <edit-transaction v-if="editableTransaction.id === transaction.id" :key="'transaction'+transaction.id+etcount" :class="{'bg ...

Trigger the execution of the second function upon the successful completion of the first

In the following code, my concept is to display: The clicked kingdom (clicked_id) initiates an attack on (clicked_id). https://i.stack.imgur.com/Bx8QW.png https://i.stack.imgur.com/Cg2GL.png https://i.stack.imgur.com/gUNxM.png How can I trigger the sec ...

Arranging numerous Text elements within a solitary Drag and Drop container with the z-index property

I am facing a challenge with stacking twelve arguments in no particular order on a drag and drop element. The texts overlap each other, making it difficult for the end user to see them clearly when dragging and dropping. Is there a way to stack texts using ...

Retrieve the ID of a specific row within a table in a datatables interface by selecting the row and then clicking a button

My goal is to have a table displayed where I can select a row and then have the option to edit or delete that row with a query. To achieve this, I need a primary key that won't be visible to the user. This is how my table is set up: <table id=&apo ...