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

Encountering issue with filtering in the Telerik VueJS grid causing errors

Encountered an error while trying to clear a set filter in vuejs (native) grid filtering implementation. The specific error message reads: [Vue warn]: Error in v-on handler: "RangeError: invalid array length" found in ---> <GridFilterCell> ...

Is there an issue with this npm version number?

I am trying to include the following dependency in the package.json file of my npm package: "redux-saga": "^1.0.0-beta.0 || ^0.16.0"`. When I install this package in a project that already has "redux-saga": "^1.0.0-beta.1 I am expecting npm/yarn to on ...

Custom-designed background featuring unique styles

I have implemented the following code to create a continuous running banner: <style> #myimage { position: fixed; left: 0%; width: 100%; bottom: 0%; background:url("http://static.giga.de/wp-content/uploads/2014/08/tastatur-bild ...

What causes the variable within the useEffect function to delay its value update?

const [inputValue, setInputValue] = useState(""); const previousInputValue = useRef(""); useEffect(() => { previousInputValue.current = inputValue; }, [inputValue]); return ( <> <input type="text" value={ ...

Having trouble getting the JavaScript function to run when clicking a button inside a div or form?

Hey there, so I've got this scenario where I have a button nestled within a div. Take a look at the HTML snippet below: <div class="row"> <button type="button" id="submit">Send</button> </div> Prior to this button, there ...

Retrieve the link's "href" attribute and its text if they match the specified text

Is there a way to extract the href link and text from a specific type of link? <a href="google.com">boom</a> I am looking to retrieve only the 'google.com' part and the text 'boom' Furthermore, how can I filter out other ...

How to execute a JavaScript function within PHP code

Hey there, seeking some assistance. On my main page index.php, I have a simple js function named function1() that opens test.php as a pop-up window when clicked. The content in this pop-up window comes from another page called p1.php. Now, I need to set it ...

Retrieve the highlighted portion of a selected option within a Vue select element

Currently, I am attempting to retrieve the selected text (not value) of a select element using Vue: var App = window.App = new Vue({ el: '#app', data: { style: '5' }, computed: { calctitle: function() { return thi ...

Acquire the Microsoft Graph Token using the adal-angular package's authentication context provided by adal.js

I am currently utilizing the authenticationContext that was established using the 'adal-angular/lib/adal.js' package in order to obtain a token for accessing microsoft graph resources. Error: User Login is required. The error message appears a ...

obtain the final result once the for loop has finished executing in Node.js and JavaScript

There is a function that returns an array of strings. async GetAllPermissonsByRoles(id) { let model: string[] = []; try { id.forEach(async (role) => { let permission = await RolePermissionModel.find({ roleId: role._id }) ...

A guide on converting JSON strings into arrays using Javascript

In my JavaScript program, I have a Mocha test that checks if all available currencies are displayed in a drop-down list: it('displays all available currencies in drop down list', () => { return invoiceEditPage.details.currencyDropDown.dr ...

Sending a message to an iframe from a different origin using JavaScript

Just starting out with JavaScript and I'm attempting to send a message to my iframe in order to scroll it. Here is the code I am using: scroll(i) { var src = $("#iframe").attr("src"); $("#iframe").contentWindow.postMe ...

Creating a Gmail share button in AngularJS: A step-by-step guide

I created a messaging web application using AngularJS, and I successfully added functionality to share messages via email using the "mailto" link. However, this method only works if the user has an email client installed. Now, I am looking for a solution ...

Transform the v-model value from numerical to textual representation

Currently, I am using the <q-select> component and populating it with options fetched from an API. The issue arises when setting the value as the ID of the object, which is a number while the component expects a string, resulting in an error. <s- ...

It appears that the JavaScript array is able to modify itself autonomously

Currently, I am working on a project using P5.js where I am saving values in an array and then creating a copy of that array to manipulate. However, I have encountered an issue where manipulating the second array also changes the original one, and I cannot ...

The functionality of the Hubot script is restricted to Slack conversations where I initiate a direct message with the

At this very moment, my automated Hubot assistant is functioning properly. When I send the following message via direct message to the robot in Slack: qbot !npm bower The response provided by the robot contains a link: https://www.npmjs.com/package/bowe ...

Troubleshooting issue: Vue.js 'if-else' condition not functioning properly when using Font Awesome icons

Below is the code that I am currently working with: <tr v-for="(i, index) in items.data"> <td>{{ index }}</td> <td>{{ i.name }}</td> <td>{{ i.producer }}</td> <td><font-awesome-icon v-if="i.recie ...

Seeking advice on removing the initial blank space from a dropdown value in Angular.js

I have a deeply thought-out logic that I would like to illustrate with an example. However, in order to present it effectively, I am looking for suggestions on how to simplify the process without relying too heavily on the controller. <select class="fo ...

The Bootstrap Navbar is causing the navigation bar to span across two lines

I'm having an issue with my navbar taking up two lines on desktop resolution, but fitting perfectly on mobile. I've spent hours going through the code with no success. Any help would be greatly appreciated. The HTML code is provided below. <! ...

When hovering over various div elements in HTML

I've been experimenting with some code lately, and I'm trying to change the text color of a menu element when hovering over it. I can alter the background color just fine, but for some reason, the text color remains unchanged. Can anyone offer a ...