Invoke v-on:click once new HTML has been added in Vue.js

Is it possible to trigger a function onclick after appending HTML in Vue.js using vue-append?

this.html = '<div id="'+folderData[key].id+'" class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">' +
                    '<a href="#" class="nav-link" style="color:black" data-toggle="tooltip" title="'+textTooltip+'"> '+ 
                        '<div class="info-box '+back+'">'+
                            '<span v-on:click="gofolder('+folderData[key].id+')" class="info-box-icon bg-success '+icon+'"></span>' +
                            '<div v-on:click="gofolder('+folderData[key].id+')" class="info-box-content">' + textName + '</div>' +
                            checkbox +
                        '</div>'+
                    '</a>' + 
                '</div>'

<template>
<div v-append.sync="html" class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 pb-filemng-template-body row">
                </div>
</template>
javascriptvue.js

Answer №1

Is it possible to only pay attention to the @appended event?

<div v-append.sync="html" @appended="onClickHandler" class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 pb-filemng-template-body row"></div>

Answer №2

To tackle the issue at hand, I have successfully utilized v-for along with an array! Instead of resorting to vue-append and constructing individual frames in HTML, I opted for using v-for to dynamically generate a list based on array data. This way, my list reflects any changes made upon clicking a button. Ex:

<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 pb-filemng-template-body row">
 <div :id="item.id" class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2" v-for="item in items" :key="item.id">
    <a href="#" class="nav-link" style="color:black" data-toggle="tooltip" :title="item.tooltip"> 
        <div class="info-box">
            <span @click="gofolder(item.id)" :class="item.icon"></span>
                <div @click="gofolder(item.id)" class="info-box-content">{{item.textName}}</div>
                <input v-if="item.checkbox === true" type="checkbox" class="" value="">
                 </div>
             </a>
            </div>
        </div>

Of particular importance is the following code snippet: v-for="item in items" :key="item.id"

Subsequently, by triggering events through button clicks, I am reassured that the correct values are being handled without error.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to apply styles to javascript elements without relying on img class? Additionally, how can I incorporate an onclick button while maintaining a fully functional navigation bar?

My current project involves creating an interactive collage where users can click around and have pictures pop up at the clicked location. The functionality works as intended, but now I'm facing issues with the navigation bar not being clickable. Addi ...

javascripthtmlcss

turn the cube shape into one with smooth, rounded corners

Does anyone know how to create a cube with rounded corners using three.js? I've heard it's not possible with CSS. Any guidance on how to achieve this? Check out this link for an example /* |------------------------------------------| | MelonHTM ...

javascriptjquerycss3dthree.js

Tips on updating Angular data model when a static HTML element changes

Currently, I am utilizing the editable-table jQuery plugin to enable editing in a table. This tool is simple to implement, lightweight, and highly efficient. The markup structure for this task looks like this: <tr ng-repeat="o in orders"> <td ...

javascriptangularjs

How can you create a personalized sorting order using odata?

Within my AngularApp, I retrieve data from a WebAPI using OData queries. All the retrieved results contain both a date and an integer status code. The status codes range from 1 to 4. I am aiming to organize my results in such a way that all items with a ...

javascriptangularjsodata

Form submission is not possible while the login form is active

I'm encountering an issue where I am unable to trigger - ng-submit or ng-click on this code except for the local onclick function on the login button. If you have any insights or solutions, please share them: <form ng-submit = "login.submitLogin ...

javascriptjqueryangularjsformsangularjs-ng-click

Updating a property value within a JSON object: Adjusting attributes in a JSON data format

How can I modify a specific key's value in a JSON array like the following example: input = [{"201708":10,"201709": 12, "metric":"attritionManaged"},{"201708":10,"201709": 12, "metric":"attritionUnManaged"},{"201708":10,"201709": 12, "metric":"EHC"}] ...

javascriptjsonnode.jstypescript

Specify the data type of a nested object in a React component with TypeScript

Interface Button{ buttonTitle: { name?: string; } } What is the best way to specify a type for the buttonTitle property? ...

javascriptnode.jstypescript

JSON Novice - persistently storing data in JSON during browser refreshes

My AJAX poll was set up following a guide found here: http://www.w3schools.com/php/php_ajax_poll.asp Instead of storing the poll entries from an HTML radio button in an array within a text file as demonstrated in the tutorial, I wanted to save them in a J ...

javascriptphphtmljsonajax

Utilize the results of the "event's" output as a variable

Struggling with manipulating checkbox values? The `change` event on checkboxes might return an object like this: {"val1":"member","val2":"book","val3":"journal","val4":"new_member","val5":"cds"} To transform the above object into a format that can be co ...

javascriptvariablesobjectextjsextjs4

How does AngularJS watcher behave when a callback is triggered during a reload or router change?

Can anyone explain why the watch callback is triggered upon browser reload or Angular route change even when the old value and new value are the same? Here's an example: $scope.test = "blah"; $scope.watch("test", function(new, old){ console.log(ne ...

javascriptangularjs

Press the button to eliminate

Is there a way for users to add tags by typing text and then clicking on an add button? Once the tag is added, it appears with a delete button, allowing users to manage their list of tags. The JavaScript code below enables users to add tags successfully, ...

javascriptjquerytags

Why are the $refs always empty or undefined within Vue components?

I am completely new to working with Vue and I've been attempting to utilize $refs to retrieve some elements within the DOM from a sibling component. My objective is very basic, as I just need to obtain their heights, but I haven't had much succes ...

javascriptvue.jsref

If there are multiple instances of the component, it may not function properly

I have implemented a Vue component as shown below: <script setup lang="ts"> import { PropType } from "nuxt/dist/app/compat/capi"; interface Star { id: string; value: number; } const stars: Star[] = [ { id: &qu ...

javascriptvue.js

Creating a basic live data visualization chart

Can anyone help me with fetching data from the database and plotting it into a real-time graph? I found an example here: The JSON structure is as follows: "networks": { "eth0": { "rx_bytes": 5338, "rx_dropped": 0, "rx_err ...

javascriptjqueryajax

Modify the shading of the mesh generated with the face3 method

I have utilized face 3 and three js to generate a mesh, but the expected color is not displaying correctly on the mesh. Below is the code snippet I used: var geometry = new THREE.Geometry(); var f = 0; for (var i = 0; i < data.real.length ...

javascripthtmlthree.js

Testing Vue with Jest - Unable to test the window.scrollTo function

Is there a way to improve test coverage for a simple scroll to element function using getBoundingClientRect and window.scrollTo? Currently, the Jest tests only provide 100% branch coverage, with all other areas at 0. Function that needs testing: export de ...

javascriptvue.jsjestjs

Issue encountered when attempting to redirect following a jQuery Ajax request

I attempted to create a redirection mechanism upon receiving a successful response from the server. I followed instructions here, but unfortunately, I couldn't get it to work as intended. Below is the function responsible for sending data to the serv ...

javascriptjqueryajaxhttp-redirect

Ensure the text value of a collection of web elements by utilizing nightwatch.js

Recently, I started using nightwatch.js and I am trying to retrieve a list of elements to verify the text value of each element against a specific string. Here's what I have attempted: function iterateElements(elems) { elems.value.forEach(funct ...

javascriptnode.jsseleniumnightwatch.js

Are there any straightforward methods to fully freeze an object along with all its descendants in JavaScript (Deep Freeze)?

Often when passing an object as a parameter, functions may access the object by reference and make changes to the original object. This can sometimes lead to unwanted outcomes. Is there a way to ensure that an object remains unchanged? I am aware of the Ob ...

javascriptarraysobjectecmascript-6

What is the best redux middleware for my needs?

As I followed the guide, I discovered a variety of middlewares available for Redux applications. Redux Thunk, Redux Promise, Redux Promise Middleware, Redux Observable, Redux Saga, Redux Pack Selecting a middleware is based on personal preference. Howeve ...

javascriptreactjsreduxreact-redux