vue 3 send value to ElMessageBox with element ui

Question

codes are below, I send String to function clickDetails, and then show a ELMessageBox dialog, but the problem, I can't use String in ELMessageBox, show me error "ESLint: 'imgUrl' is defined but never used.(no-unused-vars)"

<template>
  <el-tabs type="border-card" class="demo-tabs">
    <el-tab-pane label="List">
      <h4>Image List</h4>
      <li v-for="item in pixelData.hits" v-bind:key="item.id">
        <img :src=item.previewURL @click="clickDetails('show me!')">
        <p></p>
      </li>
    </el-tab-pane>
    <el-tab-pane label="Details">Config</el-tab-pane>
    <el-tab-pane label="Search">Role</el-tab-pane>
  </el-tabs>
</template>

<script setup>
import {reactive,onMounted} from 'vue'
import axiosService from "@/axios_uti/axiosService"
import { ElMessageBox } from 'element-plus'

const pixelData = reactive({
  hits:[]
})

const clickDetails = (imgUrl) => {
  //console.log("item",imgUrl);
  ElMessageBox.confirm(
      "<p>imgUrl</p>",
      'imgUrl.value',
      {
        dangerouslyUseHTMLString: true,
      },)
}

onMounted(() => {
  axiosService.getAll().then(response => {
    pixelData.hits = response.data.hits;
    pixelData.hits.forEach(item => console.log(item.previewURL));
  }).catch(error => {
    console.log("error",error)
  })
})
</script>

Answer 1

Well the way you use your imgUrl is only a simple string containing "imgUrl" text. Use template literals instead.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals