I have a web api project and I want to play an animation on one of my html spans.Specificly the vue returns a number and I want that number to animate increasing from 00.00% up to its value.It actually works fine with a js script that I found online if I delete a part of my html but it doesnt work and the numbers appears as 00.00 if I use my entire HTML Code.
Here is my code:
<html>
<body>
//This is the part that I want to work but appears as 00.00
<span class="Animation">{{number}}</span>%
//This is the part that if I delete it the upper part works but I want both parts in my project
<div v-for="item in items">
<h3>{{item1.name1}}</h3>
<h5 class="prediction-2">Score:{{item2.name2}}%</h5>
<a v-bind:href="'test.html?id=' + item.other_id" class="btn">
<span style="color:white;">click here</span>
</a>
</div>
<script>
$('.Animate').each(function () {
var $this = $(this);
jQuery({
Counter: 0
}).animate({
Counter: $this.text()
}, {
duration: 5000,
easing: 'swing',
step: function () {
$this.text(this.Counter.toFixed(2));
}
});
});
</script>
</body>
</html>
````````````````````
Your Vue markup is broken. Because it errors it blocks the execution of JavaScript in your page and one of the side effects is the animator doesn't run anymore.
This code is invalid:
<div v-for="item in items">
<h3>{{item1.name1}}</h3>
<h5 class="prediction-2">Score:{{item2.name2}}%</h5>
<a v-bind:href="'test.html?id=' + item.other_id" class="btn">
<span style="color:white;">click here</span>
</a>
</div>
It loops through items defining item for each iteration but then tries to use item1 and item2 (which are not defined).
My advice is to exclude the animator from your question (as it clearly works as intended when there are no errors in the page) and rewrite your question by describing what the Vue code should do.
An example of how a valid v-for looks like:
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data: () => ({
items: [{
name: 'Item 1',
prediction: 56,
other_id: 101
}, {
name: 'Item 2',
prediction: 82,
other_id: 102
}]
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="item in items">
<h3>{{item.name}}</h3>
<h5 class="prediction-2">Score: {{item.prediction}}%</h5>
<a :href="'test.html?id=' + item.other_id" class="btn">
<span>click here</span>
</a>
</div>
</div>
As you can see, it's looping through each item and rendering them according to each of their values. You'll also notice the links are correct. Without more definition on what the code should actually do/render, I can't help you more.
Related
I have this couple of 'cards' with this content
<div class='card'>
<span>title one </span>
<button #click='open = !open'>show</button>
</div>
<div class='card'>
<span>title two </span>
<button #click='open = !open'>show</button>
</div>
Where in the same component I show this modal. What i need to show inside of it is if I click the first button, show title one, if I click button 2,show title 2 and so on...
What will be the best approach to do this task? (show in modal the card content)
First a couple of things:
ooen might be a typo, did you mean open?
=! looks like a single operator but it actually means open = !open in this context. Put a space between the = and ! to make it clear what it means.
If you want to control the visibility of two sections independently then you will need two separate data properties (open1 and open2). Use v-if or v-show to control the visibility.
new Vue({
el: '#app',
data: {
open1: false,
open2: false,
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="card">
<span v-if="open1">title 1</span>
<button #click="open1 = !open1">toggle</button>
</div>
<div class="card">
<span v-if="open2">title 2</span>
<button #click="open2 = !open2">toggle</button>
</div>
</div>
If you will have lots of these, then wrap the functionality into a separate component so you don't have to define open1, open2, ... and so on.
Vue.component('card', {
template: `
<div class="card">
<span v-if="open"><slot/></span>
<button #click="open = !open">toggle</button>
</div>`,
data() {
return {
open: false
}
}
})
new Vue({
el: '#app'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<card>title 1</card>
<card>title 2</card>
</div>
I found the solution.
Create the cards data into a array of objects in the data instance
Use a v-for to loop through the cards
Create a method that capture the card clicked, create a projectSelected value in data
<button #click="showModal = !showModal,open(project)">Open</button>
captureProject(card) {
this.projectSelected = project;
},
Show the selected project inside the modal
{{ projectSelected .title }}
I am new to Vue. When I use v-if, v-else-if, and v-else, the first two tags work well. But for v-else, it only change the context in {{}}.
html:
<div id="app">
<div v-if="isIf === 1">
isIf is 1：{{isIf}}
</div>
<div v-else-if="2">
isIf is 2：{{isIf}}
</div>
<div v-else>
isIf is not 1 or 2：{{isIf}}
</div>
</div>
js:
<script>
var app = new Vue({
el: '#app',
data: {
isIf: 1,
isShow: false
}
});
</script>
when I change the app.isIf=3 in console, it showed isIf is 2: 3. My last try is app.isIf=2, so it showed the context with last input. Any idea?
Your v-else-if condition is wrong - instead of
<div v-else-if="2">
it should be
<div v-else-if="isIf === 2">
Except for zero, any numerical value will be considered "true" in Javascripts. So your render logic is always around "v-if" and "v-else-if", it never reaches "v-else"
I am new to Vuejs. This is what I need to do.
<div v-for="r in records">
<div v-if="r.something">
<div id="x">
{{ r. something}}
more of r here.
</div>
</div>
<div v-else id="x">
same div as in the block above.
</div>
</div>
What I want do is not define div with id x two times as it is huge.
Make your 'div' a component and refer to it in both places.
There are many ways to define your component. This is example shows just one. If you are using WebPack, use a single file component. You can then have your script, html, and css all in one file that gets precompiled. That's the best way to manage your 'huge' div. Then you can continue to refactor and break it up into more components.
const myComponent = {
template: "<div :id='id'>HELLO, my id is {{id}}. r.foo is {{r.foo}} </div>",
props: {
id: String
},
data() {
return {
r: {
foo: 'bar'
}
}
}
}
<div v-for="r in records">
<div v-if="r.something">
<my-component id='x' />
</div>
<div v-else id="x">
<my-component id='x' />
</div>
</div>
So i am making a Facebook-like website.
I am new to Vue and i got stuck at the comments.
I have set up a template for the posts with the like, dislike and comment buttons,
the only thing i dont know how to do is when u press the comment button i want the server responce data to be appended beneath the post and if you press it again i want the data to be hidden.Here is the template:
<template>
<div class="container">
<h2> Posts</h2>
<textarea id="post" cols="50" rows="2" placeholder="Send a post" v-
model="postBody"></textarea>
<button #click="sendPost()">Post</button>
<div class="card card-body" v-for="post in posts">
<h3>{{post.username}}</h3>
<p>{{post.postBody}}</p>
<h4>{{post.post_id}}</h4>
<small>{{post.created_at}}</small>
<span>{{post.likes}}<button #click="LikePost(post.post_id)">Like</button>
</span>
<span>{{post.dislikes}}<button
#click='DislikePost(post.post_id)'>Dislike</button></span>
<span>{{post.comments}}<button
#click='ShowComments(post.post_id)'>Comment</button></span>
</div>
</div>
</template>
<script type="text/javascript">
export default
{
data()
{
return {
posts: [],
post: {
id:'',
username:'',
postBody:'',
},
postBody:'',
post_id: '',
pagination: {},
edit: false
};`
P.S i am also new to stackoverflow so if a left any information out please let me know.
What you describe is a toggle. It corresponds to a boolean data item: true is on (comments displayed) false if off (comments not displayed). The method attached to the button switches the value of the boolean. A v-if directive controls the display of comments, based on the boolean.
I've stripped your example down to just the relevant code.
new Vue({
el: '#app',
data: {
comments: 'This is comments',
commentsVisible: false
},
methods: {
toggleComments() {
this.commentsVisible = !this.commentsVisible;
}
}
});
<script src="//unpkg.com/vue#latest/dist/vue.js"></script>
<div id="app">
<h2> Posts</h2>
<span>
<template v-if="commentsVisible">{{comments}}</template>
<button #click='toggleComments'>Comment</button>
</span>
</div>
I had this issue while trying to render html into a vue component.
I am trying to insert component html through x-template. The issue is when I was trying to display the value {{i.value}} like this it was throwing error on console.
<script type="text/x-template" id="first-template">
<div>
<ul>
<li v-for="i in dataCollection">{{ i.id }}</li>
</ul>
</div>
</script>
Vue.component('menu', {
template: '#first-template',
data() {
return {
dataCollection: [{"id":"01"}, {"id":"02"}, {"id":"03"}],
}
}
});
The error on console was:
But when I was giving value as attribute like:
<script type="text/x-template" id="first-template">
<div>
<ul>
<li v-for="i in dataCollection" :id="i.id"></li>
</ul>
</div>
</script>
it works perfect.
Anyone know any fix ?
You should not put script/x-template tages inside of the element that you mount to the main instance to. Vue 2.0 will read all of its content and try to use it as a template for the main instance, and Vue's virtualDOM treats script/x-template's like normal DOM, which screws everthing up,
Simply moving the template out of the main element solved the problem.
Source
This is a suggestion, not a answer.
As #DmitriyPanov mentioned, you'd better bind unique key when using v-for.
Another issue is you'd better to use non built-in/resevered html elements.
so change component id from menu to v-menu or else you like.
Then simulate similar codes below which are working fine.
I doubt the error is caused by some elements of dataCollection doesn't have key=id (probably you didn't post out all elements). You can try {{ 'id' in i ? i.id : 'None' }}.
Vue.component('v-menu', { //
template: '#first-template',
data() {
return {
newDataCollection: [{"id":"01"}, {"id":"02"}, {"id":"03"}, {'xx':0}],
dataCollection: [{"id":"01"}, {"id":"02"}, {"id":"03"}]
}
}
});
new Vue({
el: '#app',
data() {
return {testProperty: {
'test': '1'
}}
},
methods:{
test: function() {
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<v-menu></v-menu>
</div>
<script type="text/x-template" id="first-template">
<div>
<div style="float:left;margin-right:100px;">
<p>Old:</p>
<ul>
<li v-for="(i, index) in dataCollection" :key="index">{{ i.id }}</li>
</ul>
</div>
<div>
<p>Adjusted:</p>
<ul>
<li v-for="(i, index) in newDataCollection" :key="index">{{ 'id' in i ? i.id : 'None' }}</li>
</ul>
</div>
</div>
</script>
I think the problem here lies in the placement of the X-Template code (I had the same issue). According to the documentation:
Your x-template needs to be defined outside the DOM element to which Vue is attached.
If you are using some kind of CMS, you might end up doing just that.
What helped me in that case was (based on your example):
Placing the X-template script outside the #app
passing the collection as a prop to the v-menu component:
<v-menu v-bind:data-collection="dataCollection"></v-menu>
list dataCollection as a prop inside the v-menu component:
Vue.component('v-menu', { //
template: '#first-template',
props: [ "dataCollection" ],
...
});
I hope that helps anyone.
In 2.2.0+, when using v-for with a component, a key is now required.
You can read about it here https://v2.vuejs.org/v2/guide/list.html#v-for-with-a-Component