I want some help in Vuejs - b progress bar.
I have some value that i get from api (for example : {{data.number}} which has 20), how can i add to the b-progress bar in vuejs to show the bar progress.
I have an example of code, but it is not working:
<b-progress
:value="{{ data.number }}"
variant="success"
striped
:animated="animate"
>
</b-progress>
I am not getting the value(20) in the value field, please assist. thank you
You can first check what you are getting in console by
console.log(data.number)
If your sure what your getting from data.number then you can simply do this:
<b-progress
:value="data.number"
variant="success"
striped
:animated="animate"
>
</b-progress>
you shouldn't use the mustache, rather just say data.number.
Related
I'm having trouble trying to use the Vue.Draggable library. I would like to use a component inside my draggable while keeping the transition-group. It's working without the transition group but whenever Im adding the transition-group tag with the animation name its not working anymore. My components elements are not showing up and I'm having this error :
TypeError: Cannot set properties of null (setting '__draggable_context')
Here is my code :
<draggable :list="teams" item-key="idteam" tag="transition-group" :component-data="{name:'fade'}>
<template #item="{ element, index }">
<my-team :id="element.idteam" :name="element.teamName" :index="index">
</my-team
></template>
</draggable>
Any idea how could I make all work together ?
Thanks for your help
You need to add :animation="200"; only adding tag="transition-group" is not enough.
I've been searching this for a while but can't seem to get it right. I have a basic Nuxt project with the following directory structure (ignore the fun.vue) :
The idea is to be able to navigate to a single post with paths like http://localhost:3000/posts/1
This works, if I manually go to .../posts/1 I get my page defined in _id.vue.
The problem is that, in my index page, I cannot get <NuxtLink> to go to single post pages. I have a basic v-for looping over my fetched posts array, like so:
<template>
<div>
<div v-for="post in posts" :key="post.id">
{{ post.title }}
<NuxtLink to="`posts/${post.id}`">Link to post</NuxtLink>
</div>
</div>
</template>
I would expect, upon clicking on the 2nd post's link for example, to navigate to posts/2, but instead I get /%60posts/$%7Bpost.id%7D%60. Why isn't the template string converted normally? I've also tried using a computed value with no success, and the Nuxt Routing docs haven't been of much help.
Highly appreciate any help regarding this.
You forgot the semicolon:
:to="`/posts/${post.id}`"
or even better
:to="{ name: 'post-id' }" // post-id or basically the name you gave to your component
As shown here: https://router.vuejs.org/api/#router-link-props
You can use something like this
the ":" in front of it will make it dynamic and you can use template literals
in between those double quotes
<NuxtLink :to="`posts/${post.id}`">Link to post</NuxtLink>
I tried your code in my development environment. You also may forgot to add "/" in front of "posts":
<NuxtLink :to="`/posts/${post.id}`">Link to post</NuxtLink>
If you put your code without "/" in a Nuxt "layout", it adds "posts" iteratively to your "URL" and makes the destination wrong:
http://localhost:3000/posts/posts/2
This happens when you click on post 1 and after to post 2.
Hello I am making a multi-select in Vue and my problem is I don't get the exact data from the selected items
Here is my code
<multiselect v-model="itemValue"
:show-labels="false"
:options="itemObj"
:multiple="true"
:close-on-select="false"
:clear-on-select="false"
:hide-selected="true"
:preserve-search="true"
label="itemName" track-by="itemName"
:preselect-first="true"
placeholder="List of Items"
#select="selectItem($event)">
<template slot="selection" slot-scope="itemValue"></template>
</multiselect>
<!---- TO SHOW THE CURRENT SELECTED ITEM ID --->
<pre>{{itemValue.map(a => a.id)}}</pre>
when I try to select an Item in the selection, right in the <pre> I'm able to see the selected Item ID but when I try to console.log(itemValue) it will not show anything but if I will select another item, there must 2 selected items now which is being shown in <pre> but in my console.log(itemValue) it will just show the first selected Item.
Does anyone know how can I get the exact selected items so I can able to search using this kind of filter because basically, I will use this as a search filter.
THANK YOU!
see this codesandbox for a working sample: https://codesandbox.io/s/1yml74p9xj
there were some issue's in your code, but you can see the sample how to get it working. 3 files to look at:
App.vue (were the multi select is added to vue globally)
index.html (import of css for style)
HelloWorld.vue (for the code)
in my sample, the selectedItems contains the items that were selected/unselected from the vue multi select
I’m trying to make component like a LIKE count,
so,
i have a object is name (LIST) which i get from api, in my LIST object have property total_like which default value is 0, when i click to like button i make post request to api and in api my total_like value rising to 1 and 2 and etc.
in my view i’m displaying the like count with {{item.total_like}} everything work well to this point.
problem is item.total_like value updating only when i refresh the page, but i want to show new value of this property without refreshing page.
how can i figure out with it ?
regards
Maybe you can use the event modifiers to prevent page reloading, examples are...
<button type="submit" v-on:click.prevent="addLike" >
<button type="submit" v-on:submit.prevent="addLike">
or if you want to use the shorthand
<button type="submit" #click.prevent="addLike" >
<button type="submit" #submit.prevent="addLike">
Hope this helps.
I'm using Vue.js 2 and I'm trying to create a link that should send me to another page. This is what I have:
<div v-for="u in myList">
<router-link :to="'/type/' + u.name"><a>{{u.name}}</a></router-link>
</div>
The above piece of code works but now I would like to pass a parameter (u.weight for example ) along with this link.
I took a look at query parameters but I don't want the user to see this in the address bar type/productname/?queryparamshere.
Is there a way to hide query params, or should I consider another way in order to achieve this?