Why is the value always left unused?

Question

Why is the value always left unused?

I am having an issue with handling value changes on focus and blur events in my input field. Here is the code snippet:

<input
  v-model="totalAmount"
  @focus="hideSymbol(totalAmount)"
  @blur="showSymbol(totalAmount)"
/>
...
const totalAmount = ref('')

After defining functions hideSymbol and showSymbol, I encountered a problem where I received a warning message saying

The value assigned to 'val' is never used

. It seems like I missed something crucial in my learning process. Can anyone guide me on how to resolve this issue?

The desired outcome is to see the changed value in the input field upon focus and blur events.

typescript vue.js

Answer 1

Answer №1

Instead of passing the value into the functions, you can use a Vue data property like shown below:

 const { ref, createApp } = Vue;
   
 const App = { 
    setup() {       
      const totalAmount = ref('')
      return {
        totalAmount
      }
   },
   methods: {
      hideSymbol() {
        this.totalAmount = this.totalAmount.slice(0, -2);
      },
      showSymbol () {
        this.totalAmount = `${this.totalAmount} s`
      }
   }
}

createApp(App).mount('#app')

<div id="app">
    <input
      v-model="totalAmount"
      @focus="hideSymbol()"
      @blur="showSymbol()"
    />
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"> 
</script>

If you decide to include an 's' in your value when submitting the form, ensure that is what you truly want.

Answer 2

Instead of passing the value into the functions, you can use a Vue data property like shown below:

 const { ref, createApp } = Vue;
   
 const App = { 
    setup() {       
      const totalAmount = ref('')
      return {
        totalAmount
      }
   },
   methods: {
      hideSymbol() {
        this.totalAmount = this.totalAmount.slice(0, -2);
      },
      showSymbol () {
        this.totalAmount = `${this.totalAmount} s`
      }
   }
}

createApp(App).mount('#app')

<div id="app">
    <input
      v-model="totalAmount"
      @focus="hideSymbol()"
      @blur="showSymbol()"
    />
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"> 
</script>

If you decide to include an 's' in your value when submitting the form, ensure that is what you truly want.

Why is the value always left unused?

Answer №1

Similar questions

The Vue.js route is not aligning with its defined path, causing a mismatch

Using Angular, you can effortlessly inject elements into the editable div from any location on the page

Utilizing TypeScript to define React interfaces

Accessing references within composable functions

Mastering the use of v-if and v-else in Vue JS for <td> table elements

typescript: textual depiction of a generic type T

Leverage a single attribute from a Typescript interface within another interface

I don't understand what's happening with this ternary format in the Typescript function - something seems off

Encountering a "Module parse failed" error with type annotations in Nextjs while using Yarn Workspaces

Are 'const' and 'let' interchangeable in Typescript?

What are the steps for integrating and expanding a JavaScript library using rollup, TypeScript, and Angular 2?

Can anyone explain why the Splice function is removing the element at index 1 instead of index 0 as I specified?

Showing an error message upon submission in Angular 4 according to the server's response

Error: The property '...' is not found in the ReactElement<any, any> type, but it is required in the type '{...}'

Invoking a function on an object of a subclass that derives from an abstract class

Creating a factory function in TypeScript to generate union types

Upon submission in Vue, the data variable becomes undefined

Troubleshooting Error: "Custom Vue component installation in Laravel 5 is not found in the npm registry"

Angular displays [object Object] upon return

Is there a way to properly assign an index to a multidimensional array in a Vue.js template?