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.
Related
I never experienced this one, so I have been struggling it for 4 hours so far.
Let's say we have a button inside template literal.
<button onclick="deleting(${num})" class="btn btn-outline-danger">Delete</button>
deleting function is used for just console.log, meaning that when you click the button, you will see the ${num} value on the console.
Here is the story.
My teacher tought me to use .length + 1 function to give a unique number to each card, so I could select and delete a card by clicking the button(each card has the button). I was enjoying it and it was ok to use .length + 1 when I deleted and created the last card. However, when I deleted a card in the middle and created a new card, the card's unique number became overlapped with the last card and all messed up.
So, I searched on the Internet and realized that there was nanoid I could give a unique string to each card. Everything seemed to be fine until I faced the button.
The problem is when I directly give a value such as 1, 'a', '2' ..., it works fine (console shows the same value), however when I give a value as variable, it shows an error or some weired values.
For example,
<button onclick="deleting(1)" class="btn btn-outline-danger">Delete</button> => ok
<button onclick="deleting('2')" class="btn btn-outline-danger">Delete</button> => ok
<button onclick="deleting('a')" class="btn btn-outline-danger">Delete</button> => ok
let value = '011'
<button onclick="deleting(${value})" class="btn btn-outline-danger">Delete</button> => showing 9
let value = 'a'
<button onclick="deleting(${value})" class="btn btn-outline-danger">Delete</button> => Uncaught ReferenceError
Can anyone help me understand why these occur and how to fix?
and as a learner, I would like to learn if there are some easier and fancier ways to do it, so do not hesitate to share your knowledge with me !!
Thank you guys in advance!
I tried to solve these problems and one of them (011 shows 9) is becasue it shows as octal number when it starts with 00. (I am not sure), but I still have no idea how to make a string value in variable be transferred to an argument inside a function in template literal.
I'm using a <b-table> component in a Vue project and I need to define a function to be triggered when a row is clicked. I heard that there is a #row-clicked property in b-table so I tried to use it and I can put simple functions inside of it, I mean I can get console prints etc but nothing more complicated...
I want two functions to be executed when a row is clicked. The functions are now bound to a button inside of every row, but I dont want use it like this, I just need to click the related row to make them work. Here is the current version of the b-table component;
<b-table
:items="displayByType"
:fields="displayColumn"
responsive="sm"
:per-page="perPage"
:current-page="currentPage"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
:filter="filter"
:filter-included-fields="filterOn"
#filtered="onFiltered"
hover
#row-clicked="test"
>
And here is the two functions that I want to be triggered when a row is clicked...
toggleRightBar(){
document.body.classList.toggle("right-bar-enabled");
}
changeRightBarContent(row){
this.$store.dispatch("rightbar/changeRightBarInfo", tableData[row]);
},
There is a JavaScript folder that I export column names and row data. I also a have Rightbar, when a row is clicked, I want to enable the rightbar so that the user can see detailed information about that specific row.
At last, here is the button that I use to make these two functions work;
<template #cell(detail)="row">
<button #click="toggleRightBar(); changeRightBarContent(row.index);" class="btn btn-outline-primary toggle-right">
<i class="bx bx-detail toggle-right"></i>
</button>
</template>
Basically, I dont want to use this button, instead, I want to click the row itself. Every row's rightbar information will be uniqe, my function does that. I just dont know how to use these 2 functions inside #row-clicked
Thanks in advance.
The row-clicked event will pass 3 parameters to your function.
The first being the item specific to the row that was clicked. The second will be the index of the row, and the third is a native click event.
This means you can use the arguments keyword to get the index and pass it to your function.
#row-clicked="toggleRightBar(); changeRightBarContent(arguments[1])".
Alternatively you can create a third method which will call the other two.
<b-table #row-clicked="onRowClicked" />
{
onRowClicked(item, index, event) {
this.toggleRightBar();
this.changeRightBarContent(index);
}
}
You can read more about the #row-clicked event on the docs component reference section.
https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-events
I would like to check current URL in qweb to change the text in a button.
I am working in an online store based in Odoo 11.0 community
<button t-if="current_URL ==/shop">Filters OFF</button>
<!--Since current_URL would be something like "/shop/category/laptops?filter=5-44" if there were any filters applied -->
<button t-else="">Filters ON</button>
I simply don't know if there is something like "current_url" or any other parameter/variable that qweb would understand and could fetch as a property of the current page or if I should try to do this all in javascript.
<button t-if="request.httprequest.url == '/shop'">Filters OFF</button>
<!--Since current_URL would be something like "/shop/category/laptops?filter=5-44" if there were any filters applied -->
<button t-else="">Filters ON</button>
ref: https://werkzeug.palletsprojects.com/en/0.15.x/wrappers/#werkzeug.wrappers.BaseRequest.url it may be helpful to find other request property
I need to check if the current user is the author of the question to allow him to see/use the delete question button.
But with my implementation I can´t see the button at all:
<form #submit.prevent="deleteQuestion(question.id)">
<input type="submit" v-if="this.currentUser === question.author" value="Löschen"/>
</form>
I get question.author with a JSON request , currentUser is set during the login.
Thanks for taking the time,
Fierl.
this.currentUser and question.author are not the same objects, even though they might contain the same data. This is why the comparison fails.
Your user objects probably have an id property (or some other primary key). Compare against that instead.
<input type="submit" v-if="this.currentUser.id === question.author.id" value="Löschen"/>
I'm using https://pypi.python.org/pypi/tgapp-resetpassword/0.1.5 which allows you to override the template used for the reset password page. Unfortunately, the actual form itself is included as a 'black box':
<div>
${reset_password_form.display(action=action)}
</div>
The form has been defined as a tw2.forms.TableForm which is not how I'd like to display it. Is it possible to have finer grain control e.g. insert custom html around each of the fields, or be more explicit about how to display certain fields?
E.g. I'd like to do something like the following (made up):
<div>
<form ${reset_password_form.attrs} class="my-own-class-name">
<py:for each="field in reset_password_form.fields">
<div class="custom-class-here">
<label for="${field.id}">
... some logic to possibly override default label else...
${field.default_label_text}
</label>
${field.render_as_input_field()}
</div>
</py:for>
<button type="submit">My own submit text</button>
<form>
</div>
Is this level of customization possible with ToscaWidgets without overriding things in Python?
As by resetpassword documentation you have a reset_password.reset_password_form option that can be used to specify an alternative tw2 form.
You just need to put there the python path (like "resetpassword.lib.forms.ResetPasswordForm") of the form you would like to use in place of the default form.
Then you own form can specify a custom template like https://gist.github.com/amol-/d2a08027d34a8c4dfa69