Develop Reference

In VUE 3, how to insert a HTML code containing #click event to a already rendered page

I have a VUE3 application with Django (Python) in the backend. I am trying to add a "div" to a DataTable cell with Javascript. See the code below:
let myTable = $('#dtBasicExample').DataTable()
myTable.cell(vm.table_index, 12).data(`
<div class="d-flex justify-content-around mx-1">
${vm.counter_selected}
<a #click.prevent="unapplyCounter(index, part_number)"
class="text-danger"
id="assign_counter">
<i class="fas fa-backspace"></i>
</a>
</div>
`)
As you can see, the "a" element has a Vue #click event in it.
When this code is added to the page, it shows as an attribute, and VUE does not detect it. The screenshot below shows how the HTML is right after the code above is applied:
What am I missing in order to make VUE3 recognize the #click event?

Vuetify buttons in vue-social-sharing of nuxt application

I'm trying to implement this - https://github.com/nicolasbeauvais/vue-social-sharing in my nuxt (+vuetify) application.
I've created a file - vue-social-sharing.js in plugins folder:
import Vue from "vue";
import VueSocialSharing from "vue-social-sharing";
Vue.use(VueSocialSharing);
included them in nuxt.config.js
plugins: [
"#/plugins/vuetify",
"#/plugins/vue-social-sharing.js"
],
I'm trying to beautify the buttons with Vueity (this works fine - https://jsfiddle.net/menteora/evydLj65/1/)
<social-sharing url="https://vuejs.org/"
title="The Progressive JavaScript Framework"
description="Intuitive, Fast and Composable MVVM for building interactive interfaces."
quote="Vue is a progressive framework for building user interfaces."
hashtags="vuejs,javascript,framework"
twitter-user="vuejs"
inline-template>
<div>
<v-btn><network network="email">
<i class="fa fa-envelope"></i> Email
</network></v-btn>
<v-btn><network network="facebook">
<i class="fa fa-facebook"></i> Facebook
</network></v-btn>
</div>
</social-sharing>
But I'm running into the below errors:
[Vue warn]: The client-side rendered virtual DOM tree is not matching
server-rendered content. This is likely caused by incorrect HTML
markup, for example nesting block-level elements inside <p>, or
missing <tbody>. Bailing hydration and performing full client-side
render.
[Vue warn]: Unknown custom element: <v-btn> - did you register
the component correctly? For recursive components, make sure to
provide the "name" option.
I think it is an issue with configuration, v-btn is not available with social-sharing is being rendered, please suggest.
Thanks

I haven't installed those, but I can almost bet that the fact you are wrapping network components with a button is a problem.. Because the markup that it generates most likely looks like this:
<ul class="networks">
<button>
<li></li>
</button>
</ul>
Have you tried to replace this markup with:
<social-sharing>
<div>
<network network="facebook">
<v-btn><i class="fa fa-fw fa-facebook"></i> Facebook</v-btn>
</network>
<network network="facebook">
<v-btn><i class="fa fa-fw fa-twitter"></i> Twitter</v-btn>
</network>
</div>
</social-sharing>

AngularJS : ng-bind-html inside a uib-tooltip-html

I have to show a tooltip in my UI. I am using angularjs in UI side.
Please see the code below.
<i class="fa fa-info-circle f18 darkgray hover pointer" uib-tooltip-html="'<div class=fw-600>Reason:</div>"+obj.comments+"'" tooltip-class="white-blue-tooltip"></i>
But I am getting error when the value of obj.comments = Canceled via 'View Group'. Please see the error below.
Error: [$parse:syntax] Syntax Error: Token 'View' is an unexpected token at column 49 of the expression ['<div class=fw-600>Reason:</div>cancelling via 'View Group''] starting at [View Group''].
This is because of the single quote present in the value (Canceled via 'View Group').
In order to solve this I have used ng-Sanitize as described in the following link
https://www.w3schools.com/angular/ng_ng-bind-html.asp
Now my code look like below
<i class="fa fa-info-circle f18 darkgray hover pointer" uib-tooltip-html="'<div class=fw-600>Reason:</div> ng-bind-html="+obj.comments+"'" tooltip-class="white-blue-tooltip"></i>
But I am getting output like
Reason:
ng-bind-html=Canceled via 'View Group'
I have added 'ngSanitize' in my controller and loaded the angular.min.js and angular-sanitize.js in the page, is there anything missing here.
Appreciates any help.

You have to use $sce service. Please look into following link.
Angularjs Sce

Multiple clickable icons to PrimeNG TreeNode in Angular2 application

I am developing an angular2 application using PrimeNG. I have a tree view and in certain scenarios I need to add more than one icon to specific tree node. Any help on this is appreciated.
Example:
Icon TreeNode1
Icon1 Icon2 TreeNode2
I want the icons to be clickable so that I can perform actions like showing tooltips or show popup dialog etc...
Open on suggestions regarding any other technology that can be used to achieve above funtionality

I was looking for something related and found your question right now.
To add multiple icons to a branch (or leaf) of the tree you need to make your own templates for each type of TreeNode.`
<ng-template let-node pTemplate="group">
<i class="fa fa-bolt" (click)="doSomething('do lighting stuff')></i>
<span>{{node.label}}</span>
</ng-template>
<ng-template let-node pTemplate="node">
<i class="fa fa-signal" (click)="doSomething('do signal stuff')></i> <i class="fa fa-info" (click)="doSomething('do info stuff')></i>
<span>{{node.label}}</span>
</ng-template>
`
Check here the TreeNode interface https://github.com/primefaces/primeng/blob/master/src/app/components/common/treenode.ts

How can I bind a class attribute to an expression in Vue 2.0?

I had this in Vue 1.0:
<div v-for="menuItem in menu" class='vnav-item-wrapper'>
<i v-show="menuItem.icon" class="vnav-icon fa fa-{{menuItem.icon}}"></i>
</div>
But now the {{}} construct is obsolete in Vue 2.0.
I just read through the Class and Style guide and it simply doesn't seem to be possible for me to bind a class to "fa-" + menuItem.icon. I can't bind to an expression.
The closest I got was calculated data properties but then again, I'm in the middle of a v-for, I can't create "calculated variables".
How do I solve that?

I think this other question shows you how. It was definitely not obvious to me that once you apply v-bind: (or the : short-hand) to an attribute it's all interpreted as though it were JavaScript. So I think what you want is:
<div v-for="menuItem in menu" class='vnav-item-wrapper'>
<i v-show="menuItem.icon" :class="'vnav-icon fa fa-' + menuItem.icon"></i>
</div>