How Vue3 @/v-on event function passing work?

Question

<input type="file"
  id="fieldBoxContentAddPhoto"
  accept="image/png"
@input="inputPhoto(this,fieldBoxContentAddPhoto2,fieldBoxContentAddPhoto3)"
>

<img alt=""
  ref="fieldBoxContentAddPhoto2"
  src="fieldBoxContentAddPhoto3"
  style="width:150px;height:150px"
>

const fieldBoxContentAddPhoto2 = ref();
const fieldBoxContentAddPhoto3 = ref();

function inputPhoto(p,p2,p3){
  console.log(p);   //output is not the input element?
  console.log(p2);   //output the img element
  console.log(p3);   //output undefined?
}

1: In HTML oninput event passing 'this' will output the input element, how to do the same in @input?

2: How to output fieldBoxContentAddPhoto3 correctly, so that I can set 'p3.value = xxx;'? I know I can use 'p2.src = xxx;', but in some situations, I need to pass the ref to the function directly. Suppose I having many input+img elements in a page and need to call the same inputPhoto function for doing the same logic.

"v-on:click="handle('ok', $event)"", on here. Not sure about the other question, but you could store all of them in a variable. Or use a template ref depending on what you need. I am not sure to understand what is p, p2 and p3 honestly. — kissu
– kissu, Commented May 30, 2024 at 16:01
Oh nvm I understand now. this is the event object that you're receiving from Vue and that you could use to access the element in the same way as in HTML with $event.target. fieldBoxContentAddPhoto2 is indeed having the ref element as expected. You should not use fieldBoxContentAddPhoto3 in the inputPhoto function with p3.value = xxx but rather fieldBoxContentAddPhoto3.value directly and then use :src="fieldBoxContentAddPhoto3" on the img element. Call the inputPhoto and update the refs rather than trying to hack the DOM, this is not how Vue is supposed to work. — kissu
– kissu, Commented May 30, 2024 at 16:09
That is the point of the problem, if I have to use hard code 'fieldBoxContentAddPhoto3.value = xxx' in the function? If not, I can have a function that useable for many events, or write others global functions in project. — MGJH
– MGJH, Commented May 30, 2024 at 16:25
Make fieldBoxContentAddPhoto3 a dynamic value that could be generic and used in several places. — kissu
– kissu, Commented May 30, 2024 at 16:32
If you have many of them, use a component. Pass a param to the function to skip a hardcoded value. — kissu
– kissu, Commented May 31, 2024 at 2:28

Harpreet · Accepted Answer · 2024-05-30 16:18:15Z

Question 1 Solution: use 'event.target' to get the input element.

Question 2 Solution: Rather than passing params to function directly use reference and by using the '.value' property you can assign value. check below given example.

<template>
 <div>
   <input type="file" id="fieldBoxContentAddPhoto" accept="image/png" @input="inputPhoto">
   <img alt="" ref="fieldBoxContentAddPhoto2" :src="fieldBoxContentAddPhoto3" style="width:150px;height:150px">
 </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
  const fieldBoxContentAddPhoto2 = ref(null);
  const fieldBoxContentAddPhoto3 = ref('');

  function inputPhoto(event) {
    const inputElement = event.target;
    console.log(inputElement);
    console.log(fieldBoxContentAddPhoto2.value);
    console.log(fieldBoxContentAddPhoto3.value);

    const file = inputElement.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = function(e) {
        fieldBoxContentAddPhoto3.value = e.target.result; 
      };
      reader.readAsDataURL(file);
     }
   }

   return {
    fieldBoxContentAddPhoto2,
    fieldBoxContentAddPhoto3,
    inputPhoto
   };
  }
};
</script>

Collectives™ on Stack Overflow

How Vue3 @/v-on event function passing work?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related