Category: javascript

I want to change the button of Uppy File input from string text to svg image, and this is my code :

import { DeleteOutlined } from '@ant-design/icons';
import Uppy from '@uppy/core';
import { FileInput } from '@uppy/react';

function MyComponent() {
  const [uppy, setUppy] = useState(null);

  function handleMount() {
    const uppyInstance = Uppy({
      autoProceed: true,
      restrictions: {
        maxFileSize: 1000000, // example restriction
      },
    });

    setUppy(uppyInstance);
  }

  function handleUnmount() {
    uppy.close(); // close the uppy instance when the component is unmounted
  }

  const fileInputProps = {
    uppy: uppy,
    target: '#file-input-container',
    pretty: true,
    locale: {
      strings: {
        chooseFiles: 'Choose files'
      },
    },
  };

  return (
    <div
      id="file-input-container"
      onMouseEnter={handleMount}
      onMouseLeave={handleUnmount}
    >
      <FileInput {...fileInputProps} />
    </div>
  );
}

in locale.strings there is string text ‘Choose files’, how to replace to be <DeleteOutlined icon ?

I made a structure using BoxGeometry, and I have a DirectionalLight rotating around it. The problem is, I can see aliased light bleed in the corners. I’ve tried updating the shadow.mapSize, the blur radius, the renderer.shadowMap.type, but nothing has worked so far.

//left wall
const geometry = new THREE.BoxGeometry( 1, 15, 7 );
const material = new THREE.MeshPhongMaterial( {color: 0xFFFFFF} );
const cube = new THREE.Mesh( geometry, material );
cube.position.y = 7.5; 
cube.position.z = -4.5; 
cube.receiveShadow = true
cube.castShadow = true
scene.add( cube );

//right wall
const geometry2 = new THREE.BoxGeometry( 1, 15, 7 );
const material2 = new THREE.MeshPhongMaterial( {color: 0xFFFFFF} );
const cube2 = new THREE.Mesh( geometry2, material2);
cube2.position.y = 7.5;
cube2.position.z = -4.5; 
cube2.position.x = 16; 
cube2.receiveShadow = true
cube2.castShadow = true
scene.add( cube2 );


//back wall
const geometry3 = new THREE.BoxGeometry( 1, 15, 15 );
const material3 = new THREE.MeshPhongMaterial( {color: 0xFFFFFF} );
const cube3 = new THREE.Mesh( geometry3, material3);
cube3.position.y = 7.5;
cube3.position.x = 8;
cube3.position.z = -7.5 
cube3.rotateY(Math.PI / 2)
cube3.receiveShadow = true
cube3.castShadow = true
scene.add( cube3 );


//top
const geometry4 = new THREE.BoxGeometry( 1, 7, 17 );
const material4 = new THREE.MeshPhongMaterial( {color: 0xFFFFFF} );
const cube4 = new THREE.Mesh( geometry4, material4);
cube4.position.y = 15.5;
cube4.position.x = 8;
cube4.position.z = -4.5 
cube4.rotateY(Math.PI / 2)
cube4.rotateZ(Math.PI / 2)
cube4.receiveShadow = true
cube4.castShadow = true
scene.add( cube4 );




// DIRECTIONAL LIGHT
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.x += 20
directionalLight.position.y += 20
directionalLight.position.z += 20
directionalLight.castShadow = true
directionalLight.shadow.mapSize.width = settings.shadowMapSize;
directionalLight.shadow.mapSize.height = settings.shadowMapSize;
directionalLight.shadow.radius = settings.shadowRadius
// directionalLight.shadow.blurSamples = 500
const d = 25;
directionalLight.shadow.camera.near = 0.5
directionalLight.shadow.camera.far = 60
directionalLight.shadow.camera.left = - d;
directionalLight.shadow.camera.right = d;
directionalLight.shadow.camera.top = d;
directionalLight.shadow.camera.bottom = - d;
scene.add(directionalLight);

scene.add( new THREE.CameraHelper( directionalLight.shadow.camera ) );

@testing-library/react provides several methods for querying rendered elements including getBy* queries which will throw an error if the element is not found.

How should I handle this in my test when I just want to test that there rendered elements are on screen.
When the getBy throws an error if element is not found there is no need to assert that expect(element).toBeInTheDocument() but then I have a test without assertion.

Should I use a dummy assertion like expect(1).toBe(1) or whats the best practice here?

Example:

describe("MyComponent", () => {

  // Render helper
  function renderer(props) {
    const result = render(<MyComponent {...props} />);

    // Will throw error when element with text "My element" is not found
    const element = screen.getByText("My element");

    return {...result, element);
  }

  it("renders with my element", () => {
    const {element} = renderer({});
   
    // Redundant, will always pass when reaching this point
    expect(element).toBeInTheDocument();
  });

  // Has same effect but does not use assertion
  it("renders with my element w/o assertion", () => {
    renderer({});

    // expect(1).toBe(1); // When using dummy assertion jest wont complain
  });
});

Have a array of object and by reduce I transform it to {key: [{}], [{}]}, key is date of array
like: [{date: ’22-02-06-00:55:66′, name: ‘one’}…] and result will be {22-02-06: [{}]} all items what includes to this date. My function is:

export function getObjectOfArrayByKey<T, K extends keyof T>(
  data: T[],
  key: K,
  timeFormat: string,
  dateFormat: string,
): { [key in keyof T]: T[] } {
  return data.reduce((acc, item) => {
    const time = dayjs(item[key]).format(timeFormat);
    const date = dayjs(item[key]).format(dateFormat);

    const equalToDate = {
      time,
      ...item,
    };

    acc[date] = acc[date] || [];

    acc[date].push(equalToDate);

    return acc;
  }, {} as { [key in keyof T]: T[] & { time: string } });
}

But in constant equalToDate I add new value “time” and I don’t know how add to type script this new type for time.

I think problem is here, I need add new property for type of new array

{ [key in keyof T]: T[] & { time: string }

I have some javascript code here for a website (not one I’m gonna publish, I’m just learning) and I’m trying to check if the user input on the page matches a string, but when the if statement executes, it returns “false” rather than “true”, even though if I open my browser’s devtools and print the boolean the same way I get it in the if statement, it returns “true”!
I think it’s defining it as true or false as soon as the page loads.
I’m running the function with an href, and the first thing in the html file’s body is calling the javascript file, but why does it not define it as true or false upon the function being called? How can I fix this issue?
Should I call the script in the href somehow?
Sorry if this is an obvious issue, I’m new to javascript.

I expected it to check the condition when the if statement was executed, but instead it checks the condition as soon as the page opens so theres not even time to type anything.

I’m building a Text-To-Speech Website using Google API.

Server-Side works fine, now I started building frontend where I currently have a input field for the message that should be converted into mp3, as well as a button.

This is my frontend:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <input type="text" id="textInput">
    <button id="convertButton" onclick="convertTTS()">Konvertieren</button>

    <script>
        function convertTTS() {
            // Creating Our XMLHttpRequest object 
            var url = 'localhost:5500/convertTextToMp3';
            var xhttp = new XMLHttpRequest();

            // Making our connection  
            xhttp.open("GET", url, true);

            // function execute after request ist successful
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    console.log("Es funktioniert");
                }
            };

            // Sending our request
            xhttp.send();
        }
    </script>
</body>
</html>

and this is my server:

const textToSpeech = require("@google-cloud/text-to-speech")

// dot env
require("dotenv").config()
const fs = require("fs")
const util = require("util")
const client = new textToSpeech.TextToSpeechClient()
const express = require('express');
const app = express();
const cors = require('cors')


async function convertTextToMp3(){
    console.log("Yippie! It works!");

    const text = "Example Text"

    const request = {
        input: {text:text}, 
        voice: {languageCode:"en-US", ssmlGender:"Neutral"},
        audioConfig:{audioEncoding:"MP3"}
    }

    const [response] = await client.synthesizeSpeech(request)

    const writeFile = util.promisify(fs.writeFile)

    await writeFile("output.mp3", response.audioContent, "binary")

    console.log("Text to Speech has completed. Audio File has been saved.")
}

app.use(cors());

app.get('/convertTextToMp3', (req, res) => {
    //convertTextToMp3();
    res.send('Function called successfully!');
});

app.listen(5500, () => console.log('Server started on port 5500'));

The server is running using nodejs and I’m using express for the endpoint.

I start the frontend using the LiveServer extension from VSCode.

I also added Cors (installed using npm).

What I tried is different uses of cors like:

app.use(corse());

or

app.use(cors({
    origin: '*'
    , methods: ['GET','POST','DELETE','UPDATE','PUT','PATCH']
}));

I also tried to include it into app.get directly:

app.get('/convertTextToMp3', cors(), (req, res) => {
    //convertTextToMp3();
    res.send('Function called successfully!');
});

I also tried to call http://127.0.0.1 instead of localhost here:

var url = 'localhost:5500/convertTextToMp3';

but then I get a 404 issue from “http://127.0.0.1:5500/convertTextToMp3”:

What I expect to happen is, that I get a “Yippie! It works!” output on the console.

The actual result is this error:

Why my question is different: So far I’ve seen multiple different questions to this topic, but mostly users are using something like file:/ which I don’t use.

Other questions I found are using specific frameworks which I don’t use.

I installed vue-email-editor in my project, But I got the below error when trying to use vue-email-editor in my Laravel vuejs project:

Could not find a declaration file for module ‘vue-email-editor’. ‘/Applications/XAMPP/xamppfiles/htdocs/textiletoday/node_modules/vue-email-editor/dist/vue-email-editor.common.js’ implicitly has an ‘any’ type.
Try npm i --save-dev @types/vue-email-editor if it exists or add a new declaration (.d.ts) file containing declare module 'vue-email-editor';ts(7016).

When I run this “npm i –save-dev @types/vue-email-editor” I got the below error

npm ERR! code E404

npm ERR! 404 Not Found – GET https://registry.npmjs.org/@types%2Fvue-email-editor – Not found

npm ERR! 404

npm ERR! 404 ‘@types/vue-email-editor@*’ is not in this registry.

npm ERR! 404

npm ERR! 404 Note that you can also install from a

npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:

npm ERR! /Users/user/.npm/_logs/2023-02-23T06_35_02_174Z-debug-0.log

Basically, my problem is that my nextjs application is just a pure blank “gray” page website, and I don’t know why.

I already did the npm run build for building the application of nextjs which the folder will be created in .next right?

And this is what my project looks like in my folder VScode.

And I don’t know why even I already it in my github and then try to deploy it in vercel but it doesn’t work? Can anyone explain me why? Is it have something to with environment?

Note my project is only a CRUD with API that’s it

and as you see its empty here.

and the link is here

https://nextjs-crud-api.vercel.app/

I use the Quill Text Editor, and i use the method clipboard.dangerouslyPasteHTML for paste HTML in the editor, but if i send this :

let content= '<p class="perso-class">test</p>'; quill.clipboard.dangerouslyPasteHTML(content)

Editor contents show as: <p>test</p>, i want to keep the custom class CSS.

Thank you for your help !

I set package.json as below, but I get an error. In ios, the build was successful, but the url image is not coming out. What should I do?

{ "name": "expo-zazero-app", "version": "1.0.0", "scripts": { "start": "expo start --dev-client", "android": "expo run:android", "ios": "expo run:ios", "web": "expo start --web" }, "dependencies": { "@actbase/react-daum-postcode": "^1.0.4", "@expo/webpack-config": "^0.17.2", "@ouroboros/react-native-picker": "^0.2.1", "@powerdesigninc/react-native-prompt": "^0.1.2", "@react-native-async-storage/async-storage": "~1.17.3", "@react-native-community/checkbox": "^0.5.14", "@react-native-community/datetimepicker": "6.5.2", "@react-native-picker/picker": "2.4.8", "@react-navigation/material-top-tabs": "^6.5.1", "@react-navigation/native": "^6.0.16", "@react-navigation/stack": "^6.3.7", "@tanstack/react-query": "^4.24.4", "accordion-collapse-react-native": "^1.1.1", "AsyncStorage": "^0.1.5", "axios": "^1.2.1", "dropdown-picker": "^0.0.1", "expo": "^47.0.0", "expo-checkbox": "~2.2.2", "expo-clipboard": "~4.0.1", "expo-font": "~11.0.1", "expo-image-picker": "~14.0.2", "expo-modules-autolinking": "~1.0.0", "expo-splash-screen": "~0.17.5", "expo-status-bar": "~1.4.2", "expo-updates": "~0.15.6", "http-proxy-middleware": "^2.0.6", "https-proxy-agent": "^5.0.1", "iamport-react-native": "^2.0.4", "npm": "^9.2.0", "query-string": "^8.1.0", "react": "18.0.0", "react-daum-postcode": "^3.1.1", "react-dom": "18.1.0", "react-native": "0.69.6", "react-native-animatable": "^1.3.3", "react-native-bootstrap": "^0.1.0", "react-native-bootstrap-styles": "^4.5.0-r", "react-native-calendar-strip": "^2.2.6", "react-native-calendars": "^1.1292.0", "react-native-collapsible": "^1.6.0", "react-native-dropdown-picker": "^5.4.3", "react-native-dropdown-select-list": "^2.0.4", "react-native-fast-image": "^8.6.3", "react-native-gesture-handler": "~2.8.0", "react-native-image-slider-banner": "^1.0.3", "react-native-image-slider-box": "^2.0.7", "react-native-keyboard-aware-scroll-view": "^0.9.5", "react-native-modal-datetime-picker": "^14.0.1", "react-native-pager-view": "6.0.1", "react-native-paper": "^5.0.1", "react-native-picker": "^4.3.7", "react-native-picker-select": "^8.0.4", "react-native-render-html": "^6.3.4", "react-native-safe-area-context": "4.4.1", "react-native-screens": "~3.18.0", "react-native-svg": "13.4.0", "react-native-svg-transformer": "^1.0.0", "react-native-tab-view": "^3.3.4", "react-native-vector-icons": "^9.2.0", "react-native-web": "~0.18.7", "react-native-webview": "11.23.1", "react-native-wrapped-text": "^1.2.2", "sharp-cli": "^4.1.0", "yarn": "^1.22.19" }, "devDependencies": { "@babel/core": "^7.19.3" }, "proxy": "http://49.50.162.86:80" }

I am trying to create a funnel chart with multiple series using AmCharts (or any other chart library). Specifically, I want to display multiple funnel values within an existing funnel, as shown in this image.

// Create series
var series = chart.series.push(
  am5percent.FunnelSeries.new(root, {
    name: "Series",
    valueField: "applicants",
    categoryField: "stage",
    orientation: "vertical",
  })
);
series.data.setAll(data);
series.labels.template.set("visible", false);

var series2 = chart.series.push(
  am5percent.PyramidSeries.new(root, {
    name: "Series",
    valueField: "applicants",
    categoryField: "stage",
    orientation: "vertical",
  })
);
series2.data.setAll(data);
series2.labels.template.set("visible", false);

Tried to come up with a concept from this pen here -> https://codepen.io/team/amcharts/pen/abWVPeo and tried to combine the dataseries within by looking at their docs. It seems that when creating two dataseries, it aggregates them into the same chart, but I’m unaware of any syntax from within their docs that allows you to display multiple values in the same chart (like you would for a bar chart / line chart)

I have searched the entire AmCharts documentation, but couldn’t find anything that matches this concept. Can anyone provide guidance on how to achieve this with AmCharts, or recommend another chart library that can support this functionality? Any help would be greatly appreciated.

Given a .js file

const renderer = process.env.RENDERER;

if(!renderer) {
    console.log('missing');

    return;
}

console.log(renderer);

and a package.json

{
  "scripts": {
    "dev": "node app.js"
  }
}

I want to call the npm script inside my Github actions workflow but I want to pass the environment variable to it

name: Do

on:
  workflow_dispatch:
    inputs:
      renderer:
        description: 'A,B,C,...'
        required: true
        type: string

jobs:
  do:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3
        with:
          fetch-depth: 0

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 19.x

      - name: Install dependencies
        run: npm install

      - name: Set environment variable for renderer
        run: export RENDERER=${{ inputs.renderer }}

      - name: Test output
        run: npm run dev

When running the workflow the script writes

missing

to the console so it seems the npm script didn’t run with the environment variable.

How can I prepend RENDERER=${{ inputs.renderer }} to npm run dev?

What are the steps to migrate a react native app from API level 30 to 31.
What should I take in consideration ?
Should i update all dependencies ?
I’m using many dependencies, and there are some native. What are the moments that i can encounter doing this ?
How hard is it ?

I have a html code with multiple tags which is having text in it.

Problem Statement : I want to create a csv with headers and write a text in html tags in the respective column of csv and then want a downloadable button in a UI with which I can download the csv.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <tbody>
        <tr data-index="0">
            <td>
                <div class="card border-left-success shadow h-100 py-2 mb-2 ml-2">
                    <div class="card-body">
                        <h4 class="card-title mb-2 font-weight-bold">Service Name -1 </h4>
                        <div class="clearfix my-3"></div>
                        <h5 class="card-text">Regarding Service Name-1</h5>
                        <h5><span class="badge badge-pill badge-success"><a title="Job Details" target="_blank"
                                    href="hhh" class="text-white">DOG</a> </span> <span
                                class="badge badge-pill badge-success"><a title="Job Details" target="_blank" href="hhh"
                                    class="text-white">CAT</a> <a title="Volumetric report" class="text-white"
                                    target="_blank" href="hhh"><i class="fas fa-file-medical-alt"></i></a> <a
                                    title="Dup report" class="text-white" href="hhh"><i class="fas fa-copy"></i></a> <a
                                    title="Embargo Privacy Filter Report" class="text-white" href="hhh"><i
                                        class="fas fa-file-excel"></i></a> <a title="CAC report" class="text-white"
                                    href="hhh"><i class="fas fa-file-signature"></i></a> <a
                                    title="Existing Source Place Report" class="text-white" href="hhh"><i
                                        class="fas fa-file-archive"></i></a> <a title="VVS Validation Failed Report"
                                    class="text-white" href="hhh"><i class="fas fa-file-code"></i></a> <a
                                    title="Job report" class="text-white" href="hhh"><i
                                        class="fas fa-file-invoice"></i></a> <a title="Cumulative report"
                                    class="text-white" href="hhh"><i class="fas fa-file-medical"></i></a></span> <span
                                class="badge badge-pill badge-success"><a title="Job Details" target="_blank" href="hhh"
                                    class="text-white">LION</a> <a title="Volumetric report" class="text-white"
                                    target="_blank" href="hhh"><i class="fas fa-file-medical-alt"></i></a> <a
                                    title="Job report" class="text-white" href="hhh"><i
                                        class="fas fa-file-invoice"></i></a> <a title="Cumulative report"
                                    class="text-white" href="hhh"><i class="fas fa-file-medical"></i></a></span> <span
                                class="badge badge-pill badge-success"><a title="Job Details" target="_blank" href="hhh"
                                    class="text-white">TIGER</a> <a title="Volumetric report" class="text-white"
                                    target="_blank" href="hhh"><i class="fas fa-file-medical-alt"></i></a> <a
                                    title="Job report" class="text-white" href="hhh"><i
                                        class="fas fa-file-invoice"></i></a> <a title="Cumulative report"
                                    class="text-white" href="hhh"><i class="fas fa-file-medical"></i></a></span> <span
                                class="badge badge-pill badge-success"><a title="Job Details" target="_blank" href="hhh"
                                    class="text-white">RABBIT</a> <a title="Volumetric report" class="text-white"
                                    target="_blank" href="hhh"><i class="fas fa-file-medical-alt"></i></a> <a
                                    title="Job report" class="text-white" href="hhh"><i
                                        class="fas fa-file-invoice"></i></a> <a title="Cumulative report"
                                    class="text-white" href="hhh"><i class="fas fa-file-medical"></i></a> </span> </h5>
                        <div class="text-muted"><small><i class="fa fa-user"></i> Submitted By: xyz On: 7/29/2022,
                                11:19:24 AM </small></div>
                        <div class="text-muted"><small><i class="fa fa-envelope"></i> Email To: [email protected]</small>
                        </div>
                        <div class="my-2 clearfix">
                            <div class="row">
                                <div class="col-10">
                                    <a class="btn btn-sm btn-light btn-icon-split copier float-left"
                                        data-clipboard-text="uihfg" title="Click to Copy">
                                        <span class="icon text-gray-600"><i class="fas fa-hdd"></i> NFFS</span>
                                        <span class="text">mycomputer/folder</span>
                                    </a>
                                </div>

                                <div class="col">
                                    <span class="float-right">&nbsp;<span>
                                            <a tabindex="0" class="btn btn-sm btn-dark float-right" role="button"
                                                title="" onclick="yu" data-original-title="Payload"><i
                                                    class="fas fa-info-circle"></i></a>
                                        </span></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
            <td><a target="_blank" href="hhh">4567</a></td>
        </tr>
        <tr data-index="1">
            <td>
                <div class="card border-left-success shadow h-100 py-2 mb-2 ml-2">
                    <div class="card-body">
                        <h4 class="card-title mb-2 font-weight-bold">Service Name -2</h4>
                        <div class="clearfix my-3"></div>
                        <h5 class="card-text"> Regarding Service Name-2</h5>
                        <h5><span class="badge badge-pill badge-success"><a title="Job Details" target="_blank"
                                    href="hhh" class="text-white">DOG</a> </span> <span
                                class="badge badge-pill badge-success"><a title="Job Details" target="_blank" href="hhh"
                                    class="text-white">CAT</a> <a title="Volumetric report" class="text-white"
                                    target="_blank" href="hhh"><i class="fas fa-file-medical-alt"></i></a> <a
                                    title="Dup report" class="text-white" href="hhh"><i class="fas fa-copy"></i></a> <a
                                    title="Embargo Privacy Filter Report" class="text-white" href="hhh"><i
                                        class="fas fa-file-excel"></i></a> <a title="CAC report" class="text-white"
                                    href="hhh"><i class="fas fa-file-signature"></i></a> <a
                                    title="Existing Source Place Report" class="text-white" href="hhh"><i
                                        class="fas fa-file-archive"></i></a> <a title="VVS Validation Failed Report"
                                    class="text-white" href="hhh"><i class="fas fa-file-code"></i></a> <a
                                    title="Job report" class="text-white" href="hhh"><i
                                        class="fas fa-file-invoice"></i></a> <a title="Cumulative report"
                                    class="text-white" href="hhh"><i class="fas fa-file-medical"></i></a></span> </h5>
                        <div class="text-muted"><small><i class="fa fa-user"></i> Submitted By: abc On: 6/9/2022,
                                8:21:30 PM </small></div>
                        <div class="text-muted"><small><i class="fa fa-envelope"></i> Email To: [email protected]</small>
                        </div>
                        <div class="my-2 clearfix">
                            <div class="row">
                                <div class="col-10">
                                    <a class="btn btn-sm btn-light btn-icon-split copier float-left"
                                        data-clipboard-text="uiih/" title="Click to Copy">
                                        <span class="icon text-gray-600"><i class="fas fa-hdd"></i> SSS</span>
                                        <span class="text">mycomputer/folder/</span>
                                    </a>
                                </div>

                                <div class="col">
                                    <span class="float-right">&nbsp;<span>
                                            <a tabindex="0" class="btn btn-sm btn-dark float-right" role="button"
                                                title="Payload" onclick="showJsonPopover(hhhh)"><i
                                                    class="fas fa-info-circle"></i></a>
                                        </span></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
            <td><a target="_blank" href="hhh">7634</a></td>
        </tr>
        <tr data-index="2">
            <td>
                <div class="card border-left-danger shadow h-100 py-2 mb-2 ml-2">
                    <div class="card-body">
                        <h4 class="card-title mb-2 font-weight-bold">Service Name -3</h4>
                        <div class="clearfix my-3"></div>
                        <h5 class="card-text"> Regarding Service Name-3</h5>
                        <h5><span class="badge badge-pill badge-success"><a title="Job Details" target="_blank"
                                    href="hhh" class="text-white">DOG</a> <a title="Resume Staging" class="text-white"
                                    href="hhh"><i class="fas fa-play-circle"></i></a> </span> <span
                                class="badge badge-pill badge-danger"><a title="Job Details" target="_blank" href="hhh"
                                    class="text-white">CAT</a> </span> </h5>
                        <div class="text-muted"><small><i class="fa fa-user"></i> Submitted By: uui On: 6/9/2022,
                                8:38:17 AM </small></div> <div class="text-muted"><small><i class="fa fa-envelope"></i>
                            Email To: [email protected]</small>
                    </div>
                    <div class="my-2 clearfix">
                        <div class="row">
                            <div class="col-10">
                                <a class="btn btn-sm btn-light btn-icon-split copier float-left"
                                    data-clipboard-text="xml" title="Click to Copy">
                                    <span class="icon text-gray-600"><i class="fas fa-hdd"></i> YU3</span>
                                    <span class="text">mycomputer/folder/</span>
                                </a>
                            </div>

                            <div class="col">
                                <span class="float-right">&nbsp;<span>
                                        <a tabindex="0" class="btn btn-sm btn-dark float-right" role="button"
                                            title="Payload" onclick="showJsonPopover(yuh)"><i
                                                class="fas fa-info-circle"></i></a>
                                    </span></span>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </td>
            <td><a target="_blank" href="yuhg">9087</a></td>
        </tr>
        <tr data-index="3">
            <td>
                <div class="card border-left-danger shadow h-100 py-2 mb-2 ml-2">

                    <span>
                        <i class="fa fa-download" aria-hidden="true"></i>
                    </span>

</body>

</html>

Expected CSv :

if <span> tag of DOG has a class = 'badge-success' then in a DOG column success should get inserted.
if any one of the column is absent then - should appear in csv.

Reffer fiddle link : https://jsfiddle.net/f5kc1g2d/

I want to call an inner function of a component if I click a button. There are many suggestions using shared data, but it should work separately for different components. Here’s an example:

// Page.vue
<template>
    <MyComponent my-prop="abc"/>
    <button @click="???">ButtonX</button>

    <MyComponent my-prop="123"/>
    <button @click="???">ButtonY</button>
</template>
// ...

// MyComponent.vue:
<script>
    function foo() {
        //Do something inside this component
    }
</script>
// ...

My goal is that if I press ButtonX then foo() function called for <MyComponent my-prop="abc"/> but if I press ButtonY the same inner foo() function runs for <MyComponent my-prop="123"/>.
How could I achieve that? (The components could be far from each other in the component tree.)

I prefer solution using only Vue 3 and Pinia.