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 ?
Related
I would like to add Vue to my Django project, but i'm having troubles understanding
some parts of it.
At the actual moment, my project already has a bunch of templates and views. Everything is rendered by the views, the only JS i'm using is for Jquery. The need to add Vue comes to improve my UI. I don't need Vue to be my frontend, i only want to add some Vue components to my templates here and there.
After making some research, i found about the Webpack + Vue approach. It's not the right approach for my project since it should be used for a project where the frontend is entirely built on Vue and is divided from the Django backend, so it is not the right way for me.
At this point, the only way to go would be to add it using the CDN on my django html template:
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.0"></script>
Would this approach be possible?
Yes, this is possible.
Just add the script inside your template:
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.0"></script>
And then you can initialize the Vue components inside other script tags. It is advisable to change interpolation brackets from {{ }} to [[ ]], to avoid conflict with Django templating engine.
<div id="example">
<p>[[ hello ]]</p>
</div>
<script>
new Vue({
el: '#example',
delimiters: ['[[', ']]'],
data: { hello: 'Hello World!' }
})
</script>
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)
Folks, I'm having some beginner problem and would love some assistance. This is in ember 2.6 if it makes any difference. Basically, I'm trying to change some text on the screen when the button is pressed inside a component. Here's the handlebars and component js code:
<h2>Stupid Button</h2>
<div>
<form id="sign_in_form" {{action 'triggerTheAction' on='submit'}}>
<button id="signin" type="submit">FIRE!</button>
{{someTextThatShouldChange}}
</form>
</div>
And the component's js code:
export default Ember.Component.extend({
someTextThatShouldChange: 'Initial Value',
actions: {
triggerTheAction: (email, password) => {
alert('alerts just fine');
this.set('someTextThatShouldChange', 'New value for text!');
}
}
});
The error I get in console:
TypeError: _this.set is not a function
Really appreciate the help. I have a feeling I'm just not understanding something fundamental about Ember.
You are using an arrow function to define the action handler. This means that it's binding this to the outer scope, which in your case is the ES6 module. By the specification, a module's this is undefined.
I have recently decided to do a major upgrade with my javascript libraries and have ran into a perplexing issue with appending Ember.Views. I have been researching this issue for several hours now and have tried many things but nothing has worked.
What I want to do is quite simple: Extend Ember.View, manually create a new instance of this extended view and then append it to a div. In a much earlier version (ember.js 1.5) this was extremely straightforward. Now (ember.js 1.9) attempting the same thing results in an error.
Container was not found when looking up a views template. This is most
likely due to manually instantiating an Ember.View. See:
http://git.io/EKPpnA
Here is a very simple example that demonstrates this: http://jsfiddle.net/81dhm3ta/
html
<body>
<script data-template-name="main" type="text/x-handlebars">
Main
</script>
<div id="main" style="text-align: center;"></div>
</body>
javascript
$(document).ready(function () {
App = Ember.Application.create();
App.MainView = Ember.View.extend({
templateName: 'main',
});
App.view = App.MainView.create();
App.view.appendTo("#main");
});
Can someone show me the simplest way to do this properly?
App.view is neither a D0M element or jQuery object that you can simply append to a div. It is an Ember object of type View.
In the link given by the error, you are clearly told that you can't create views like you did in your snippet. Dynamic views must be instantiated within a parent view or directly through the container (not recommended).
Your life will be much easier if you add views within a template by just using the view helper:
<script type="text/x-handlebars" data-template-name="index">
{{view 'main'}}
</script>
I'm having quite the problem with Handlebars.JS as it is not replacing {{anything}} with the corresponding variables.
I have the following helper function:
function compileTemplate(name){
return Handlebars.compile($('#'+name+'-template').html());
}
Which I use in the following Backbone view:
Soccer.Teams.Li = compileTemplate('team-li');
Soccer.Router = Backbone.Router.extend({
routes: {
"": "index"
},
index: function(){
Soccer.container.html(compileTemplate('main'));
var teams = new Soccer.Teams.View();
var container = Soccer.container.find('.sub-content');
container.html(teams.render().$el.html());
var teamsList = container.find('#teams-list');
teams.teams.forEach(function(team){
teamsList.append(Soccer.Teams.Li(team.toJSON()));
}, this);
Soccer.page.trigger('pagecreate');
}
});
And #team-li-template is the following:
<script id="team-li-template" type="text/x-handlebars-template">
<li team-id="{{id}}"><a>{{name}}</a></li>
</script>
The correct information is definitely being passed, if I console.log the .toJSON it does contain the correct information, but nothing is replaced, the tags are just turned into nothing.
Any ideas?
Thanks!
Update:
Strangely enough I copied all of my code to a JSFiddle and it worked fine:
http://jsfiddle.net/vcrhh/1/
The actual app is 54.235.201.41 (sorry, wouldn't let me add it as a link).
Also tried just saving the code as a file locally and running it, that works fine too.
User username: mkremer90#gmail.com and password test for both. See anything wrong with the actual app? Why would it work in JSFiddle/local and not in my app?
The Handlebars and Backbone looks fine and the fiddle runs so the problem is with your testing environment. When I look at the page source on your server, I see this:
<script id="team-li-template" type="text/x-handlebars-template">
<li team-id=""><a></a></li>
</script>
Note the conspicuous absence of braces. I'd guess that something server-side is eating your braces. You say that you're using Django so Django's templates are probably causing your problem.