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?
I'm new to using Vue.js and I am trying to learn how to implement a rating system for recipes in my Laravel application using vue-star-rating. The first thing I want to learn is how to build components and then include them in my blade views. Already here I am running into trouble.
Trying to include the ExampleComponent.vue that comes with Laravel out of the box, but I don't understand how I am to include it in my blade file.
The top of my blade file looks like this
Blade view
<div class="col-sm-6">
<div class="container recipeDesc">
<h2 class="text-center name">{{$recipe->title}}</h2>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<div id="app">
<example-component></example-component>
</div>
Default JS file
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app',
components: {
'example-component': require('./components/ExampleComponent.vue'),
}
});
How would I include the ExampleComponent.vue in this div? Having a hard time understanding this, even when reading the Vue.js documentation.
Thank you!
If you still have the default js files of the Laravel installation, in your resources/js/app.js file you should have the following:
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app'
});
The first line tells you that the name you should use for the example component is example-component, so to include it on your blade view, simply write this:
<example-component/>
The second block in the app.js file tells you that Vue will work on an element with id="app", so you should make sure that you have an div with that id on your layout if you want to use Vue components.
Before the body ending tag, you should include the vue script source in order to be able to implement it in your views:
<script src="{{ asset('js/app.js') }}"></script></body>
I am trying to toggle a font awesome icon based on a boolean value but it seems that the font-awesome icon remains on the screen after it is drawn:
https://jsfiddle.net/50wL7mdz/200312/
HTML:
<script src="https://unpkg.com/vue"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>

<div id="app">
<input v-model="marked" type="checkbox"/>
<i v-if="marked" class="far fa-check-square"></i>
</div>
JS:
new Vue({
el: '#app',
data: {
marked: false
}
})
Am I doing something wrong or is there a bug in font-awesome or vue.js?
I ran into this issue recently when using Vue.js 2.5.x with FontAwesome 5.5.x — the icon classes were not being updated as expected.
After switching from the FontAwesome Web Fonts + CSS implementation to SVG + JS, the following code no longer worked:
<i :class="[sortByFirstNameAsc ? 'fa-chevron-up' : 'fa-chevron-down', 'fa']"></i>
What would happen is that FontAwesome JavaScript would fire and wrap the <i> tag and replace it with an SVG element, as in the following simplified example:
<span data-v-2614dbd6="">
<svg data-v-2614dbd6="" class="svg-inline--fa fa-caret-up" ...">
...
</svg>
<!-- <i data-v-2614dbd6="" class="fa fa-caret-up"></i> -->
</span>
Unfortunately, the active class was being toggled on the inner, hidden <i> tag and not the outer, visible SVG element.
The workaround that restored the dynamic active class toggling was to wrap the FontAwesome icons in a span and use the v-show directive, as illustrated in the following code snippet:
<span v-show="sortByFirstNameAsc"><i class="fa fa-caret-up"></i></span>
<span v-show="sortByFirstNameDesc"><i class="fa fa-caret-down"></i></span>
The FontAwesome documentation now recommends using their Vue component to avoid conflicts in the DOM:
Compatibility Heads Up!
If you are using Vue you need the vue-fontawesome package or Web Fonts with CSS.
The SVG core package is helpful and recommended in the following cases:
to subset a large number of icons into only the icons that you are using
as base libraries for larger integrations with tools like React, Angular, Vue, or Ember (in fact our own components use these packages)
as CommonJS/ES6 Modules bundling tool like Webpack, Rollup, or Parcel
as UMD-style loader library like RequireJS
directly on the server with CommonJS (see our Server Side Rendering docs
"i" tag comments out after fire turning to svg, use some wrap <span v-if="marked"><i class="far fa-check-square"></i></span>
This answer applies to using Font Awesome with SVG.
For some reason, you need to wrap the i tag twice. For example, instead of this:
<div v-if="condition">
<i class="fal fa-caret-left"></i>
</div>
<div v-else>
<i class="fas fa-caret-left"></i>
</div>
do this:
<template v-if="condition">
<div>
<i class="fal fa-caret-left"></i>
</div>
</template>
<template v-else>
<div>
<i class="fas fa-caret-left"></i>
</div>
</template>
Not entirely sure why you need to wrap it twice since I'd think you decouple the i tag enough by wrapping it once, but it worked for me this way so there's apparently something else going on.
Also, keep in mind that the inner div can't be replaced with template for obvious reasons (template tags do not get rendered).
The Font Awesome library you used doesn't know about Vue. It takes the <i> that you wrote and turns it into an <svg>, and at that point, it's been stolen from Vue. Vue no longer controls it. The answer that Dialog gave was a good one: wrap it with a <span>. But then you pointed out another scenario it doesn't work for.
To solve your scenario where wrapping with a <span> still doesn't work, use key="fa-sort-up". This will force Vue to re-render the wrapper, at which point Font Awesome will update the icon. Here's the updated jsFiddle for your example:
<span key="fa-sort-up" v-if="sort && descending"><i class="fas fa-sort-up"></i></span>
<span key="fa-sort-down" v-else-if="sort"><i class="fas fa-sort-down"></i></span>
<span key="fa-sort" v-else><i class="fas fa-sort"></i></span>
You can use anything you want for the key, as long as it's unique.
Toggle a checkbox in vue with FontAwesome
<style>
.fa-check-square::before {
color: green;
}
</style>
<script>
Vue.component('some',
{
data:
function() {
return{
isclick: false
}
},
methods: {
isClicked: function() {
this.isclick = !this.isclick;
}
},
template: '<div id="test" v-on:click="isClicked">' +
'<i v-if="isclick" class="fa fa-check-square" style="font-size: 40px;"></i>' +
'<i v-if="!isclick" class="far fa-square" style="font-size: 40px;"></i>' +
'</div>'
});
</script>
<div id="componentsDemo">
<some></some>
<some></some>
<some></some>
<some></some>
</div>
<script>
new Vue({ el: '#componentsDemo' });
</script>
I fixed this by creating a template for each icon, then loading either template conditionally based on a boolean.
Here's my main template:
<div v-if="minimised">
<maximise-icon>
</maximise-icon>
</div>
<div v-if="!minimised">
<minimise-icon>
</minimise-icon>
</div>
Then just create the icons like so:
FontAwesomeConfig = { autoReplaceSvg: 'nest' }//important addition!
Vue.component('minimise-icon', {
template:
`
<i class="fas fa-minus "></i>
`
})
Vue.component('maximise-icon', {
template:
`
<i class="fas fa-plus "></i>
`
})
If there's a more elegant way I'm all ears!
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
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?