So I've got a Django/Vue project I'm trying to get off the ground. It's currently being pretty inconsistent. (I was able to get Vue to generate some things, but not others)
I first got Vue working, but upon realizing I would need to wipe browser history, I followed these instructions pretty much to the letter: https://github.com/tjwalch/django-livereload-server
Although it was unclear that one needed to spawn a new session and run both livereload and runserver concurrently, I eventually figured it out and got rid of the following warnings.
GET http://127.0.0.1:32657/livereload.js net::ERR_CONNECTIONREFUSED
But Vue is inconsistent. Something simple:
<html>
<head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
<div id="app">
<p>{{ title }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
title: 'yadda yadda'
}
});
</body>
</html>
And nothing on the screen. I'm not entirely sure livereload is the issue.
Delimiters!
new Vue({
el: '#app',
delimiters: ['[[', ']]'],
data: {
title: 'yadda yadda'
}
Apparently I had previously set them and stopped for whatever reason. (hence the inconsistency)
Related
Maybe this question sounds silly but still my vue code doesn't want to work. I'm totally new in Vue. I just added script in my <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
And thought it would be enough. Then I wrote the simple piece of code:
new Vue({
el: ".seats_displayer",
data: {
display: "redbox"
}
})
and the caught element:
<div class="seats_displayer">
{{display}}
</div>
console says that "display" has not been defined. When I type VUE in console it shows me the vue's object. What did I do wrong ?
I'm trying to get Slick Nav working and I'm currently testing it unsuccessfully on an empty page online. Locally it works perfectly, but it just doesn't want to run online - even if its the identical code. I have put the files from the "dist" folder from the slick nav download into a folder called "SlickNav" on my main folder on my FTP-Server (just like I did it locally). My test page contains the following:
<link rel="stylesheet" href="SlickNav/slicknav.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="SlickNav/jquery.slicknav.min.js"></script>
// I already tried putting my URL before the link rel and the script src above but it didn't help
<script>
$(function(){
$('#menu').slicknav({
label: "MENU"
});
});
<ul id="menu">
<li><a class="scroll" href="#features">Features</a></li>
<li><a class="scroll" href="#usage">Usage Instructions</a></li>
<li><a class="scroll" href="#examples">Examples</a></li>
<li>View on Github</li>
</ul>
I'm trying this for over 3 hours now and I just don't see it anymore.. perhaps someone had similar problems or simply sees the (probably dumb) mistake, I would be eternally grateful..
Found the solution after inspecting the console: For the code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
which I simply copy and pasted had to be changed to match the https of my site -> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
I'm development a blog using django and I have included the addthis tool for include the share buttons. I'm including the addthis buttons in the posts detail page. I need to get the facebook shares count for the current blog post deetail. I'm using these steps, but I'm gettin this error in the console: ReferenceError: addthis is not defined.
The addthis code is loaded remotely then, I think that my js is not running because it runs before the addthis script load is complete. How can I fix it?
{% block js %}
<script type="text/javascript"src="//s7.addthis.com/js/300/addthis_widget.js#pubid=fdfs" async="async"></script>
<script src="{% static 'js/blog/blog_list.js' %}"></script>
<script>
$(function () {
addthis.sharecounters.getShareCounts('facebook', function(obj) {
console.log(obj);
});
})
</script>
{% endblock %}
You can wrap your function around window.load like below
$(window).load(function() {
addthis.sharecounters.getShareCounts('facebook', function(obj) {
console.log(obj);
});
})
This will ensure that the code will get executed once entire window is loaded. For further reading read this.
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 have some troubles to make Reveal work properly from a dynamic link.
This is working fine if the link is loaded with the page. If the link is appended later on, it won't work:
<div id="deleteConfirm" class="reveal-modal" data-reveal>
Delete Confirm Modal
</div>
<a data-modal="deleteConfirm">Test</a>
JS:
$('body').on('click','a[data-modal]',function(){
$(document).foundation();
$('#deleteConfirm').foundation('reveal', 'open');
});
You need to use reflow. I assume that you are loading some html using ajax which includes a reveal link
If you have div#ajax-content you can use the following javascript
$(document).on('replace', '#ajax-content', function (e, new_path, original_path) {
$(document).foundation('reveal', 'reflow');
});