I'm creating a rates per hour form. I have all the categories in my database rates table. I'd like to be able to grow the categories and it will automatically grow the fields on my form.. loop through it all.
The user needs to select a begin to end rate. I start at this rate and end at this rate.
So right now I have these values in json being loaded onto my page:
rateCategories: [ { "name": "Local", "input1": "Local$0", "input2":
"Local$1" }, { "name": "International", "input1": "International$0",
"input2": "International$1" }, { "name": "Weekdays", "input1":
"Weekdays$0", "input2": "Weekdays$1" }, { "name": "Weekends",
"input1": "Weekends$0", "input2": "Weekends$1" } ]
userRates: { "Local$0": 10, "Local$1": 25, "International$0": 300,
"International$1": 400, "Weekdays$0": 100, "Weekdays$1": 200,
"Weekends$0": 200, "Weekends$1": 300 }
What I'm doing is looping through rateCategories array to create the form. I need to dynamically create the v-model name for all the input fields to match the keys in userRates...
This is where it stops working! It will create the v-model name for me if I write:
:v-model.number="'userRates.'+rateCategories.name+'$0'"
but it won't compute it with the value from the user array. I do get a value into an input field if I write out the v-model name without creating it dynamically like this:
v-model.number="userRates.Weekdays$0"
but then the form needs to be manually updated every time a new category is added.
Is it really impossible to have a dynamic v-model name?? Why??
Also if that's so, how do I go about this so the page can loop through the categories when added to the database and not need a manual update to the page when categories are added or taken away??
Note: I'm also using Vuex store, so I'd rather it not break anything with my getter and setter functions too
Vue.js has full javascript expression support in data bindings, so an object's property can be accessed like you would in plain javascript.
Have you tried using userRates[rateCategories.name$0] ?
Using Javascript Expressions in Vue.js
Related
I would like to automatically bulk delete all tasks older than a month in HubSpot (we have more than 10,000 tasks!), instead of doing it one by one. I tried looking on the internet but it doesn’t seem that HubSpot has any functionalities like it. Thus, I tried to implement such scenario using Make (formerly Integromat) unsuccessfully.
Answering to my question for knowledge purposes.
I managed to create a scenario allowing me to automatically bulk delete tasks (or anything) based on a certain set of criteria using Make (formerly Integromat). I had to use HubSpot’s API and Flow Control tools to achieve such result.
The scenario looks like the following:
Module 1: API Call
Search for all tasks based on a certain set of criteria (here, all tasks created before the last 30 days).
If you wish to search for another object (such as contacts or deals), you can take a look at the CRM Search API for all available search requests. You can also browse through the Properties API to get a comprehensive list of available properties.
URL: /crm/v3/objects/tasks/search
Method: POST
Body:
{
"limit": "5",
"properties": [
"hs_task_subject",
"hs_task_type",
"hs_timestamp"
],
"filterGroups": [
{
"filters": [
{
"propertyName": "hs_task_status",
"operator": "EQ",
"value": "NOT_STARTED"
},
{
"propertyName": "hs_createdate",
"operator": "LT",
"value": "{{formatDate(addDays(now; -30); "x")}}"
}
]
}
]
}
Module 2: Repeater
Initial Value: 0
Repeats: {{if(module1.body.total = null; 1; module1.body.total / 100)}} (if total is less than 100, do not repeat)
Step: {{ifempty(module1.body.paging.next.after; 100)}} (automatically sets it to the first module’s after value, otherwise to 100 if after` value is empty)
You can find out more about properties and search limitations here and here. Basically, the repeater allows you to loop over all HubSpot pages.
Module 3: Sleep
Sleep module to prevent RateLimitError
Module 4: API Call
Same as Module 1, except that you must add an after parameter to include the repeater’s value.
+ "after": "{{module2.i}}"
Module 5: Iterator
Iterate over Module 4’s results array: {{module4.body.results}}.
Module 6: API Call
Delete tasks using the ID returned by the iterator.
{
"inputs":[
{
"id":"{{module5.id}}"
}
]
}
Voilà !
I'm using this library for autocomplete select, and in my logic, I also want to trigger require validation (from vuelidate library) on the fly. I want to trigger the require validation rule when the user focuses out the input and when the user selects some value from the suggestion list.
And for some reason when I'm selecting a value by the first time from the suggestion list it's triggering focusout event not a select, probably b-z list is out of input focus, but when I'm selecting an item from the list by the second time it's triggering select event not focusout (as it should). NOTE: vue trigger select event only when I select value for the second time, first, third and all next times it's always triggering focusout event.
Question: why it's not triggering select event and how to force triggering it??
Code snippet:
<vue-simple-suggest v-model="city.searchInput"
:debounce="300"
:min-length="2"
display-attribute="name"
value-attribute="id"
:list="getCity"
:filter-by-query="true"
#select="citySelect">
<input type="search"
class="form-control"
placeholder="Place of birth"
#focusout="cityError" />
</vue-simple-suggest>
methods: {
cityError() {
console.log('cityError');, // <== when I select some item from suggestions list by the first time this event triggered
},
citySelect() {
console.log('citySelect'); // <== when I'm clicking by input second time (the suggestions list already loaded) and select some (or same) value from suggestions list this event triggered
},
getCity() {
// here should be ajax call, but for now just dummy data
return [{
"id": "691b237b0322f28988f3ce03e321ff72a12167fd",
"name": "Paris",
"lat": -33.8599358,
"lng": 151.2090295
},
{
"id": "691b237b0322f28988f3ce03e321ff72a12167fs",
"name": "New York",
"lat": -33.8599358,
"lng": 151.2090295
},
]
}
}
I open an issue on github https://github.com/KazanExpress/vue-simple-suggest/issues/353 (it has detailed information and small video which showing the issue, you can check browser console), but I'm not sure it's related to the library.
Thanks in advance!
I saw in the documentation of the library that it allows blur event. Could you try #blur in vue-simple-suggest component instead of #focusout in the input?
Otherwise you can run a controller in the #select="checkCitySelection" to avoid the #focusout event in the input:
checkCitySelection(citySelected) {
this.$v.city.value.$touch();
if (this.$v.city.value.$invalid) this.cityError()
else this.citySelect();
}
I want to use the last column as the expand row functionality. For this I'm using master/detail. The last column of master will just be an arrow down icon which on click will show the detail row. I'm unable to add a last column without providing a field name. The column is rendered empty. How can I use something like this:
{
headerName: '',
field: "", // as not associated to any column data
cellRenderer: "agGroupCellRenderer"
}
Here's the working example that you may be looking for, I did not had to rely on field for it. https://plnkr.co/edit/RxjZ9rUt7HUhlw5ejUd6?p=preview
Example is in ReactJS ag-grid code but the same thing applies to any framework as ag-grid relies on the columnDefinition array that you pass it in.
Here's the code change:
{
colId: "action", // optional
headerName: "Action", // set it to single space if you dont want any text
cellRendererFramework: (params) => <button onClick={() => (console.log(params), params.node.setSelected(true))}>+</button>, // this can be your any custom function
suppressSorting: true, // sorting for this field dont make sense, but optional
},
Hope that helps.
I understand with Vue JS 2, you have to declare reactive properties upfront.
However, just wondering how would you do a rest call if the child objects appear depending on a few other conditions. For example:
"abc": {
"tests": [
{
"a1": "xxxx",
"result": null,
"selected": false,
"comment": null
} ...
]
}
Now in this example, what happens if the tests are empty ((null)) in some circumstances?
eg: if you bind it using the v-model xx.xx.abc.tests[1].selected - This wont work as tests[1] is null.
So I tried using Vue.set in mounted function to assign a default value but that did not work. It will be hard to define all these in a static data as then I have to know all the tests before the rest call.
Looking at the Vue warning when accessing nested object the issue is if I do the check for inside
the checkbox (Checkbox is rendered from Spring MVC tag).
<form:checkbox id="xx" path="..Spring MVC Path.." v-if="(xx.xx.abc.tests!=null && xx.xxx.abc.tests[3].selected)" **v-model**="xx.xxx.abc.tests[3].selected"/>
The checkbox does not appear at all. I want it to appear regardless of empty value as it gives users to add the option. Also, the other option of statically declaring it does not work as I don't know want to hard code and define array.
for example that means in case another element is added it is hardcoded into script:
[
{
"testName": String,
"result": String,
"selected": false,
"comment": String
},
{
"testName": String,
"result": String,
"selected": false,
"comment": String
}
]
Basically I need to bind using v-model even if it is null in this case. Tried Vue.set but for some reason did not appear to work.
I guess I am missing something here,any help would be appreciated.
Assume that you have a list of checkbox to render whether the child element is null on not. but you do know the array length, right?
If you do, consider use v-for to render checkboxes (then you’re able to track array item by index) and listening on its change event then assign specific value to specific object when events fire
thanks for the replies. As this was due to rest call not returning all required attributes that was defined in Vue model(As mentioned in question).So I checked that in final section of rest call and if they are empty, created them.
axios
.get(***URL***)
.then(
response => {
this.info = response.data;
this.status.loaded = true;
}
)
.finally(
() => {
*** check and fill missing attributes with default values ***
**Example: this.$set(this.someObject, 'b', 2)
}
)
Reference:
https://v2.vuejs.org/v2/guide/reactivity.html
I'm seeing some odd behavior with some custom serializer code that I wrote.
I have a field in an Asset model called 'marketName'. My Rails backend expects this field to be called 'market_name'. I've extended the ActiveModelSerializer and have overridden the 'extractSingle' and 'serialize' methods.
The odd thing is this - for all the other fields in my Asset model that are not made up of multiple words - the serialization code that I've written works great. No issues. However - for any field containing multiple words - the serialization doesn't work completely, in that while it saves the Asset when created - it doesn't correctly populate the Asset model's 'marketName' field (and any other field that is made up of multiple words).
For example if I examine the 'marketName' field in the data inspector it appears as '{}'. If I change the name of any multi word field in my Asset model to be singular (aka change 'marketName' to 'name') and update the serialization code accordingly - everthing works great.
Any idea what's going on ?
Thanks
Dave
In the test of extractSingle() that the core team (see line 126, also show below incase link goes bad for future readers) did, they pass in the variables as super_villains, then later the normalize() included in ActiveModelSerializer changes it for them to superVillains.
So I think in your extractSingle assume the values are not yet camelCase, but still are still in underscore_format (e.g., "market_name"), and you should be golden!
test("extractSingle", function() {
env.container.register('adapter:superVillain', DS.ActiveModelAdapter);
var json_hash = {
home_planet: {id: "1", name: "Umber", super_villain_ids: [1]},
super_villains: [{
id: "1",
first_name: "Tom",
last_name: "Dale",
home_planet_id: "1"
}]
};
var json = env.amsSerializer.extractSingle(env.store, HomePlanet, json_hash);
deepEqual(json, {
"id": "1",
"name": "Umber",
"superVillains": [1]
});
env.store.find("superVillain", 1).then(async(function(minion){
equal(minion.get('firstName'), "Tom");
}));
});