Using a Props component in a VueJs event

When a component triggers an event, I am attempting to access one of its props. This particular component is sourced from .

Among other props like name and value, this component has several properties. My goal is to retrieve the name or value of the switch when a change event occurs.

Furthermore, how can I access any prop of the switch that initiated the change event?

I attempted the following code but received 'undefined' as a result:

 <div v-for="organizer in organizers>
     <el-switch @change="changeOrganizers($event.target.name, $event.target.value)" :name="organizer.name">
    </el-switch>
</div>


var Main = {
    data() {
      return {
        value1: true,
      }
    },
    methods : {
        changeSwitch(name) {
      console.log(name)
      }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

http://jsfiddle.net/2hr6y79h/2/

Thank you

Solution

<div v-for="organizer in organizers>
     <el-switch @change="changeOrganizers()" :name="organizer.name">
    </el-switch>
</div>


var Main = {
    data() {
      return {
        value1: true,
      }
    },
    methods : {
        changeSwitch() {
      console.log(event.currentTarget.checked);
      console.log(event.currentTarget.name)
      }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

Answer №1

<div v-for="organizer in eventOrganizers>
     <el-switch @click="toggleSwitch()" :label="organizer.label">
    </el-switch>
</div>


var App = {
  data() {
    return {
      isEnabled: true,
    }
  },
  methods : {
    toggleSwitch() {
      console.log(event.target.checked);
      console.log(event.target.label)
    }
  }
};

var Constructor = Vue.extend(App)
new Constructor().$mount('#app')

Answer №2

Just give this a shot

@update="toggleSwitch"

http://jsfiddle.net/2hr6y79h/3/

This method will provide the value you seek.

The component is expected to use

this.$emit('update', this.value)

which will send the name as the single argument to your linked "update" event handler.


If you require the name as initially passed via props, it likely remains constant so store a reference to it in your Vue instance / component, for example

data () {
  return {
    value1: true,
    name: 'test-name'
  }
}

and implement

<el-switch ... :name="name"

This way, you can always retrieve it using this.name.

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

The 'substr' property is not found in the type 'string | string[]'

Recently, I had a JavaScript code that was working fine. Now, I'm in the process of converting it to TypeScript. var ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress; if (ip.substr(0, 7) == "::ffff ...

Converting a Backbone collection with attributes into a JSON format

Can you provide guidance on serializing a Backbone collection with attributes and models into JSON? For example, consider the following collection: var myCollection = Backbone.Collection.extend({ initialize: function (attr, options) { this.prop ...

Having trouble getting the video to load on your Mozilla Firefox browser?

Unable to play video on Firefox. Error message: URL.createObjectURL(video): Error decoding media resource blob: NS_ERROR_DOM_MEDIA_FATAL_ERR (0x806e0005) Details: Decoder may not support the requested video format with YUV444 chroma subsampling. Tried usi ...

Display the selected value in the `vuetify` select component before the user

I have integrated Vuetify into my project and encountered an issue with the select component. Here is how I have set it up: <v-select v-model="gender.value" :items="gender.items" label="Gender" :solo=" ...

Creating custom elements for the header bar in Ionic can easily be accomplished by adding your own unique design elements to the header bar or

I'm a beginner with Ionic and I'm looking to customize the items on the header bar. It appears that the header bar is created by the framework within the ion-nav-bar element. <ion-nav-bar class="bar-positive"> <ion-nav-back-button> ...

Generate checkboxes within a For loop and connect their values using Vue JS

I am currently working on setting up filters to sort through data from a database by using multiple checkboxes in combination. The goal is something similar to this: https://i.sstatic.net/woGkR.png After being redirected from a landing page, I arrive at ...

Executing npm variables dynamically (such as process.env.SERVER) on a Windows system with Cmder - a step-by-step guide

I've put together a NodeJs, Selenium, and WebdriverIO framework, but I'm having trouble with running npm variables at runtime (Oddly enough, it works fine on my Mac). Here's an excerpt from my wdio file: if(process.env.SERVER == "prod") { ...

How to modify a specific property of an array object in JavaScript

I have an array of objects that looks like this: [ { number: 1, name: "A" }, { number: 2, name: "e", }, { number: 3, name: "EE", } ] I am looking for a way to insert an object into the array at a specific position and ...

Selecting a pair of radio buttons to toggle the visibility of different div elements using JavaScript

I've been working on two radio button categories that control the visibility of different input fields. I'm making progress, but I'm still struggling to get it to work perfectly. Below are the images for reference: The combination of &apos ...

Utilize the power of RxJS to send numerous post requests within an Angular application

I have a form where users input names and count numbers. My goal is to append the number to each name. For example, If a user enters "worker" and a count of 5, I want to add numbers from 1 to 5: worker-1, worker-2, worker-3, worker-4, worker-5. After cr ...

Is it illegal to escape quotes when using an image source attribute and onerror event in HTML: `<img src="x" onerror="alert("hello")" />`?

Experimenting with escape characters has been a fascinating experience for me. <img src="x" onerror=alert('hello'); /> <img src="x" onerror="alert(\"hello\")" /> The second code snippet triggers an illegal character error ...

Multiple executions of Google API sign in listener

I have been working on a Vue module that allows users to add events to Google Calendar easily. Once a user signs in, there is a listener in place to call a method for adding an event to the calendar. To access the gapi functionalities required for this tas ...

Tips for continuing a count from where it left off

I have encountered an issue with the input fields in my form. I used the counter method to add input fields and saved the form. However, when I try to add more fields, the counter starts from 0 again. For example, I initially added 5 input fields with mod ...

Navigating the realm of POST requests in Node.js: A comprehensive guide

Attempting a POST-request function for the first time, I encountered a roadblock while using "Axios". Check out the HTML and JavaScript files below: https://i.sstatic.net/afD41.png HTML (This section allows for inputting values in the "English" and "Japan ...

A more efficient method for tallying values within an object (JavaScript, React)

Is there a more efficient way to determine the count of items with a specific key/value pair in a React state? When the list is large, this method may become a bottleneck. To illustrate the question, consider the following simplified example: class App ...

Controlling ever-changing routes using AngularJS

My AngularJS app (Angular v1) has a secure login system in place. Users who are not authenticated can only access the login page, forgotten password page, and cookie policy. I am utilizing ngRoute as shown below: $routeProvider .when('/login ...

Steps to installing npm on Ubuntu without root access:1. First, download

I have successfully installed node in a custom directory within my home folder called "local" following the instructions provided here: https://gist.github.com/isaacs/579814 Here is the output: Creating ./icu_config.gypi * Utilizing ICU in deps/icu-sma ...

What is the process for using a click event to redirect to a different page on a website?

Currently, I am working with vue-bootstrap and I have a set of cards, each containing a button. I want each of these buttons to redirect me to a different form, but I am struggling with implementing this functionality. Below is the snippet of my code: < ...

Effortless Like/Unlike feature with a text button option enhanced with ajax functionality and

Struggling to create a simple Like/Unlike button in PHP without refreshing the page. Despite an abundance of tutorials on AJAX and jQuery, implementation remains elusive due to lack of experience. Uncertain where each part of the code goes within which fil ...

Utilizing JavaScript AJAX to upload a dynamically generated PDF file to a specific directory on the server

Looking for a solution to save a complex table generated via JavaScript as a PDF on the server. Existing pdf generation libraries have limitations with style and fonts, making it difficult for 'complex' tables. The table can currently be download ...