I am interested in utilizing props to send a variable to the view

Looking for assistance with passing the variable tmp_sell to my view. Here is the code:

    <p @tmp_sell="getTmpSell" >?</p>
    <input ref="q_subtotal" placeholder="Subtotal" @tmp_sell="getTmpSell"  id="q_subtotal"   />
export default{
props: ['tmp_sell'],
}

This is the component where the variable is needed:

choosenProductSell(ev, p, i){

   var tmp_one_sell = parseFloat(d.data().p_sell);   
   this.tmp_sell = this.tmp_sell + tmp_one_sell;
},

I have declared the variable on both sides, but am struggling with allocating this.tmp_sell to the input tag q_subtotal. Any skilled individuals willing to take a look?

Answer №1

Your code does not provide enough detail to address your issue effectively. Consider creating a Minimal, Reproducible Example for better clarification.

Furthermore, the snippet of code you provided contains a couple of errors:

  1. The use of the <input> tag with @tmp_sell="getTmpSell" is incorrect as inputs cannot generate custom tmp_sell events.
  2. You have defined tmp_sell as props: ['tmp_sell'], but you are binding it as an event. This seems to be a misunderstanding between v-bind(:) and v-on(@).

I recommend investing more time in understanding the fundamentals of Vue.js, as mentioned by Daniel in the previous comment.

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

Oops! An issue occurred at ./node_modules/web3-eth-contract/node_modules/web3-providers-http/lib/index.js:26:0 where a module cannot be located. The module in question is 'http'

I have been troubleshooting an issue with Next.js The error I am encountering => error - ./node_modules/web3-eth-contract/node_modules/web3-providers-http/lib/index.js:26:0 Module not found: Can't resolve 'http' Import trace for req ...

"PHP and Javascript Validation Library: Building Confidence in Your Data

Looking for a PHP form validation library that can work independently outside of any PHP framework? It should be able to handle basic validations like checking for empty fields, using regex, validating email addresses, and alphanumeric characters. Ideally, ...

Incorporate a CSS class name with a TypeScript property in Angular version 7

Struggling with something seemingly simple... All I need is for my span tag to take on a class called "store" from a variable in my .ts file: <span [ngClass]="{'flag-icon': true, 'my_property_in_TS': true}"></span> I&apos ...

The scroll-to-top arrow remains concealed when the height of the html and body elements is set to 100

I recently added a scroll-to-top arrow using Jquery, and it's functioning flawlessly. However, I encountered an issue when I set body and html to a height of 100%, as it mysteriously disappears. View this fiddle for reference The HTML structure is a ...

Avoid running old JavaScript code when using turbolinks in conjunction with highcharts library, specifically LazyHighCharts

Utilizing turbolinks 5 and rails version 5, along with the latest Highcharts has been causing me some issues. T LazyHighCharts offers a solution for Turbolinks 5 by encapsulating chart building javascript within (function() { document.addEventListe ...

Emptying the data of a form that has been submitted using Ajax

None of the similar questions really address the issue from my perspective. I am facing a challenge with a user registration form where I utilize .post for ajax handling. Below is the code snippet: $('#register_user_form').submit(function(){ ...

Purge stored events from BehaviorSubject in Angular2 using Observables as they are consumed

I'm encountering an issue that I believe stems from my limited understanding of Observables. This project is built on Angular2 (v4.0.3) and employs rx/js along with Observables. Within a state service, there exists a store for events: // Observab ...

Troubleshooting a Node.js problem with variable scope

I'm working on a nodejs route that downloads a URL as an mp3 using npm-youtube-dl. I have a download directory being monitored with chokidar for new files, and once a file is added, I save the file link. After the download completes, a function is cal ...

Remove the Prisma self-referencing relationship (one-to-many)

I'm working with this particular prisma schema: model Directory { id String @id @default(cuid()) name String? parentDirectoryId String? userId String parentDirectory Directory? @relation("p ...

npm package construction failed

https://i.stack.imgur.com/bk9r2.png Whenever I attempt to execute the command npm run watch, I consistently encounter this error message. Can someone please assist me with resolving this issue? Click on the image to view the problem. Thank you in advance. ...

Select a random object from a document and dispatch it. A Discord bot

I'm looking to enhance my bot by adding a command that retrieves a random quote from a JSON file and displays it in chat. I've already figured out how to do this using an array, but I'm not sure how to pull the quotes from a file. EDIT: ...

Automated web browser capture downloading feature

Currently, I am in the process of developing a tool to streamline tasks at my workplace. One feature we need is an aspx webpage where users can input information, then click on a submit button. When the submit button is clicked, a javascript download dialo ...

Tips for including an external .js file in a .php file

In an attempt to call a JavaScript function located in an external file, I am facing some issues. Here is my folder structure: C:\xampp\htdocs\test\index.php C:\xampp\htdocs\test\js\functions.js index.php &l ...

Enhance your webpage with dynamic styling using third-party CSS animation

Apologies for any similarity to other questions on this topic. I have searched extensively, but any assistance would be greatly appreciated. I am utilizing a new animation library from Animista to animate specific elements on a test website. Animating ele ...

The Vue app's containing div appears empty, even though it actually contains elements

I have recently started diving into Vue.js and I am currently taking the Vue Mastery beginners course. Strangely, when I inspect the div with the id "app" in Chrome, it appears to contain no elements even though my HTML code clearly shows otherwise. Intere ...

How to update image source in VUE.js after form submission

I am encountering an issue with vue.js2. After submitting a form, I need to refresh the image src. When the form is submitted, a new image containing a chart is generated in the backend. The new chart image replaces the old one, but the URL remains the s ...

What is the best way to retrieve the ID of the input element using a jQuery object?

After submitting a form with checkboxes, I retrieve the jQuery object containing the checked input elements. var $form = $(e.currentTarget); var $inputs = $form.find("input.form-check-input:checked") Here is an example of how the inputs are stru ...

displaying only the date in bootstrap-datetimepicker

I am currently utilizing the repository created by smalot, and my intention is to choose and display dates only (while in other instances I showcase both date and time, hence utilizing this repository). Although I have succeeded in selecting dates only, th ...

Encountering issues with React Apollo hooks after integrating React Native into the monorepo system

I am in the process of setting up a React web app and a React-native app within a monorepo using yarn workspaces. The web and controllers are functioning properly, allowing me to successfully execute graphql queries to my apollo-express server. However, up ...

What distinguishes event-stream.through from event-stream.map?

After reviewing the documentation on event-stream, it appears that the main distinction between these two methods is whether they operate synchronously or asynchronously. However, I am still unclear on the true significance of this difference. ...