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>

Upgrading materializecss from 0.100.1 to 1.0.0 results in multiple javascript errors

I'am trying to upgrade my materializecss from 0.100.1 to 1.0.0. I followed the upgrade guide and applied all the changes to my code but I am still facing multiple javascript errors. In our application we are using vue 2.6.10.
Tabs:
Our tabs are rendered by a vue component:
<ul class="tabs timerange" id="timeTab" style="width: 90%">
<input type="hidden" id="time" v-model="$parent.syncData.currentTime">
<li style="width:75px; display: inline-block" v-bind:data-time="value"
v-for="(value,key) in $parent.syncData.timeGrid"
class="tab">
<a class="text-black" v-bind:href="'#tab_'+key"
v-on:click="$parent.setTime(value)">{{value}} h</a>
</li>
</ul>
Then they get initialized in a separate javascript with jquery:
$(document).ready(function() {
$('#timeTab').tabs();
});
This results in the following error:
I've already tried initializing them in the created() and updated() callbacks of the vue component but without success.
Dropdown:
For dropdowns I get the following error:
This error is reproducible when I comment my code for the dropdown and replace it with the example code from the materializecss docs.
How can I fix these kind of errors or where is a good start to debug?

We had some duplicate initializations within the code. As well as some were initialized with jquery and some not. Cleaning up the initialization and only initializing the components once without jquery fixed the errors.
materializecss checks if already instances for the given elements exists and if they do they will be destroyed and reinitialized but within the destroy process we got the errors.

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

Materialize a href buttons inside a React Router Link Component

I'm trying to use materialize.css to stylize a signup button. Materialize creates buttons using the anchor tag e.g
<a class="waves-effect waves-light btn">Button</a>
which renders this:
Currently I'm using this in a Meteor project using react-router and trying to wrap a react-router < Link > component around it
<Link to="signup"><a className="waves-effect waves-light btn blue-grey darken-1"><i className="material-icons left">cloud</i>Register Here!</a></Link>
With this implementation I'm getting this dom warning:
"Warning: validateDOMNesting(...): cannot appear as a descendant of . See App > Link > a > ... > a."
How would I go about getting around this?