Vue.js disable dynamic binding? - javascript

I am wondering if it is possible to disable the dynamic binding for one instance of an attribute that I am displaying.
Let's just say I have something like this that is working with two way binding:
this.$children[0].$data.hits
The implementation here is that I have a vacation website where I want to display the total amount of hits which can be derived from this number.
But this number also work with binding so that when you search it gets updated. I want a single instance that does not get updated and shows me the initial count without changing when a user does search.
Is is easily possible or do I just need to set a separate attribute on my components data?

So hits is just a number? then assign it to another data prop initially, before users can search. it won't be updated.
this.originalHits = this.$children[0].$data.hits

Related

Input field value not recognizable when updated with DOM manipulation

I am trying change input field values in big-commerce checkout page. When I try to change the value of the field using jquery, the value is successfully updated on the UI. But when I try to go to the next section, It says that the field is required.
So the problem is that, when I type something manually into the field, that's the only way the page allows me go to the next step, but If I change the value with DOM manipulation. It does not somehow recognize it.
The checkout is a just an embedded React app. The checkout state is managed by React. Changing a value with JavaScript does not update the React state.
In order to update values in the checkout, you will need to use the storefront Checkouts API, and then trigger a page refresh. https://developer.bigcommerce.com/api-reference/68accc5f14783-update-a-consignment

How to implement addable fields with Formik and React?

I'm trying to create an addable form like this photo with the help Formik :
But what is the best practice to implement this feature ?
In this case, name and price are textbox, but product categories are different with nested concept !
With this form, user can add a product to multi categories, user can add more fields and set new categories.
Due to the arrows, user must follow steps to set a category item in the last step !
Also user can delete no needed rows ...
I've searched into StackOverflow and Google, but I didn't find any suitable solution.
Thanks
You should use FieldArray.
<FieldArray /> is a component that helps with common array/list manipulations. You pass it a name property with the path to the key within values that holds the relevant array. will then give you access to array helper methods via render props. For convenience, calling these methods will trigger validation and also manage touched for you.
So you will need a initial value that is an array and another to tell what will be the name or the input you want when adding a new field.
If you look at the example in the docs, it's exactly what you need.

Reload partial and retain form values

When purchasing a course, the user can enter 1 or more students to register for the course. By default there is only one entry but the user can use a dropdown to select more and then the form will update to show more.
I am accomplishing this by triggering an event when the user changes the dropdown value that uses ajax to call an action which returns a partial with the appropriate number of entries and then I just replace the existing div with the new one.
My question is whether there is a way to implement this so that it's kind of like "refreshing" the page where the form remembers and automatically refills in he values the user already entered just like if you were to refresh the entire webpage. Is there a way to do this, or will I need to pass in the existing values into the action in my ajax call and have the partial set them?
A secondary question I just thought of (and perhaps this should be in another post but I will go ahead and put it here for now) is whether I should be concerned about any weird behavior with validation when doing it this way? (I'm using stock, built in validation with annotations).

Can I control handstontables autocomplete edtors initial value?

With Handsontable, I use autocomplete columns to let users choose from a list of pre defined names. But when the user selects a name I don't actually store that name on my data object, I store an id connected to the name. The id is also what is available on the data when the table is loaded initially.
This means that I need a function to go from id to name and vice versa which I have. I use the id to name function in my renderer and I use the name to id function in beforeChange, so that the output contains the id.
Here is my problem:
If I select a cell with a name rendered and I press enter, I now see the id instead of the name. Is there some way I can change the behavior of the editor so that the name is shown instead of the id?
Everything else seems to work. If I for instance select a cell and start typing, it now contains what I typed and the autocomplete works as expected. I would like to have the same behavior when pressing enter on a cell.
I ended up using a solution where I do the translation on all the data when it is loaded. When I then extract data from the sheet I translate it back.
I encountered a similar problem with the date editor where I wanted to go back and forth between the user date format and our normalized date format. Handsons editors are not that easy to work with and especially the date editor receives dates in different formats on setValue.
The solution feels a bit hacky but at the same time there will only be on these two occasions when data is transformed which makes it less plausible that there will be any errors compared to if I were to transform on render, data entry, validation etc. With this solution I know that as long as we are in the sheet, the data is what the user sees.

InputRichText to display output

I want inputRichText to display the output from the database which it was inputted earlier. The reason is the user get chance to input and display the data in same page. After inputting the data he can save it and retrieve it in the same inputRichText. Can you let me know if this work by in built or should i customize the js code? If so i would appreciate if someone have the js scripts. Also alternate idea are appreciated too. Right now i am using Icefaces component for inputRichText.
You can use the value attribute to set the content of inputRichText as string, also can use binding with the backing bean component of type InputRichText, but previous is more preferable way.
You can re-use the same object used for persisting data, to display the content later. It will be having the value fetched from the database & the same will be displayed as text. You have to initialize the string before displaying the page.

Categories

Resources