Why does value is never used?-CodePudding

I have

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

So I want to cahnge value on focus and blur

const hideSymbol = (val: string) => {
  val = val.slice(0, -1)
}

const showSymbol = (val: string) => {
  val = `${val} s`
}

So I get The value assigned to 'val' is never used I think that I missed very important thing in learning so i can't resolve it. How can I get it? Help please!

I expected changed value in input

CodePudding user response：

You don't need to pass the value into the functions.

Just use a Vue data property like this:

 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>

Be sure you really want to have an 's' in your value when the form submit occurs.