I am getting Vue warning as
infinite update loop in component render function
. I am writing a unit test and getting this warning. I am using Vuetify's data table for displaying data.
My code is as follows:
<template>
<v-data-table
id="permission-table"
v-model="selected"
:headers="headers"
:items="users"
:items-per-page="10"
class="elevation-1"
>
<template v-slot:header.admin="{ header }">
<roles-tool-tip
:description="header.description"
/>
<span> {{header.text}}</span>
</template>
<template v-slot:item.admin="{ item }">
<v-checkbox class="cb-center cb-admin" v-model="item.admin" #change="updateUserPermission(item)"></v-checkbox>
</template>
</v-data-table>
</template>
If you're using a Version of Vue Test Utils >v1.0.0-beta29 you probably ran into this problem: https://github.com/vuejs/vue-test-utils/issues/1407
Related
I am rather stumped as to how I can render Tex equations in my html. I have a vue project with django in the backend as the CMS. I am using Ckeditor as a rich text field which uploads the equation within markdown from an api.
In my vue page I can render all the text with no issues using v-html but my mathematical equations are rendering like this: \(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)
I have tried many ways to no avail and I can currently get a test equation to render by adding this to index.html
<script>
MathJax = {
tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]}
};
</script>
<script id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-chtml.js">.
</script>
and this to my vue page:
<span class='math-tex'>( \(\frac{2}{7},\frac{2}{18}\) )</span>
However I cant seem to get it to work with inline math and text. Here is my vue div:
<template v-if="$store.state.user.isAuthenticated">
<template v-if="activeLesson">
<span v-html="activeLesson.long_description"></span>
</template>
</template>
Whats strange as well is when I add the test equation <span class='math-tex'>( \(\frac{2}{7},\frac{2}{18}\) )</span> in the template v-f section it doesnt render?
What am i doing wrong?
Please halp.
Good Afternoon,
I am trying to crate a page, where i keep the navigation and the footer template always on, and in the main yield, i load the data refering to the page i am accessing.
my problem is, in the routes.js file i used the following
Router.configure({
layoutTemplate:'mainLayout',
//notFoundTemplate:"notFoundTemplate",
//loadingTemplate:"loadingTemplate",
});
Router.route('/', function () {
this.render('navigation', {to: 'navigation'});
this.render('footer', {to: 'footer'});
this.render('carousel');
this.render('oper_areas');
this.render('partners');
});
and my mainLayout template goes like this
<template name="mainLayout">
<header>
{{> yield 'navigation'}}
</header>
{{> yield }}
<footer class="full-width">
{{> yield 'footer'}}
</footer>
</template>
so i am sending the navigation template to the navigation yield, the footer to the footer yield and this is working fine, and then i am trying to fill the {{> yield }} with the content of 'carousel', 'oper_areas' and 'partners', this will assemble all the information i need to create my main page, but only the last one is showing.
is there anyway i can put the 3 templates inside the same {{> yield }} at the same time?
thanks for the help in advance.
I'm creating a very basic Ember application using ember-cli and Ember 2.0. I used ember-cli to generate a template called 'footer.hbs' and the same component named 'footer.js'. Should Ember be able to correctly pick up any expressions I use in the footer.hbs? For example, I'm using the following three files: footer.js, footer.hbs, and application.hbs which imports the partial 'footer'. Why does the {{firstName}} property not show at all?
footer.js - /app/controllers/footer.js
import Ember from 'ember';
export default Ember.Controller.extend({
firstName: "TEST"
});
footer.hbs - /app/template/footer.hbs
<footer class='nav navbar-inverse navbar-fixed-bottom'>
<div class='container'>
<ul class="footer-social list-inline">
<li></li>
<li></li>
<li>{{firstName}}</li>
</ul>
</div>
</footer>
application.hbs
{{partial 'navigation'}}
{{outlet}}
{{partial 'footer'}}
It looks like your files weren't generated as a component. I believe what you want to run is:
ember g component footer
in which case you would just have to put the following in application.hbs:
{{navigation}}
{{outlet}}
{{footer}}
Edit: looks like you can't call a component 'footer', so would have to call it something like 'footer-nav'
Yes, you can access your controllers properties in the same template. You have two problems:
{{partial 'footer'}}
Partial inserts a template, what you want to do is use render:
{{render 'footer'}}
Beyond that /app/template/footer.hbs should be /app/templates/footer.hbs
Example on accessing the controller property: http://emberjs.jsbin.com/vipiwe/2/edit?html,js,output
Is it possible to have an if / else statement which does not render any html in a view similar to knockout:
<!-- ko if: someExpressionGoesHere -->
but it needs to be on an element
Yes, but if v-if conditional is false, it's not added to DOM tree.
HTML
<div id="main"></div>
JavaScript
new Vue({
el: "#main",
template: '<div v-if="name"><span v-text="name"></span></div>',
data: {
// name: "bob"
}
});
console.log(document.body.innerHTML);
// <div id="main"><!--vue-if--></div>
Still not good for you?
I know the question was already answered, but thought I would pass along something I use, now that I am writing sites with Vue (which I love.) I am a fan of Knockout and have many sites written in it using the:
<!-- ko if: someExpressionGoesHere -->
You could do a similar thing in Vue like this:
<template v-if="someExpressionGoesHere">
<p>Expression is True</p>
</template>
<template v-else>
<p>Expression is False</p>
</template>
The templates will not render anything to the page. The resulting html will be a single p of the 'Expression is xxx'.
I think it is a bit more clear of what the intent of the code is here than the actual answer to this post IMHO.
you can also use this way to write if else condition in vue.js
<template>
<div id="app">
<p v-if="someConditionHere">Condition True</p>
<p v-else>Condition False</p>
</div>
</template>
I'm trying to add an attribute to many external links. The below code worked prior to Blaze, which only runs Template.rendered once now (but the below code doesn't run as desired one time even).
So what is an alternative way to add an attribute to many links once the page has been rendered or what is the correct way to do this with Meteor now? BTW, I researched quite a few things, including this example app from the author, which if it has the answer, I didn't see it.
Template.layout.rendered = function () {
console.log('CALLED'); // runs
$(document).ready(function () {
console.log('NOW THIS'); // runs
$('a.external').each(function () {
console.log('NOT CALLED'); // doesn't run
$(this).attr('target', '_blank');
});
});
};
There are several ways to deal with this problem, none of them is perfect. It's worth noting that this issue has been raised and most likely it will be solved via a custom event as proposed here.
For now, the simplest way to do this is to move each element you need to adjust to a separate template. So instead of:
<template name="layout">
{{#each links}}
<a class="external" ...>
{{/each}}
</template>
You will have:
<template name="layout">
{{#each links}}
{{> layout_externalLink}}
{{/each}}
</template>
<template name="layout_externalLink">
<a class="external" ...>
</template>