Sorry to post here but I'm having hard times to find out how to retrieve the index of the clicked element in vuetify autocomplete, with the goal to change one of the key of the object that match the clicked element.
I'm having a simple autocomplete with an array of items and i call a method on click
<v-autocomplete
:click="onInputClicked"
:items="items">
I used the :click of vuetify in their autocomplete API, that says :
Events >
click : Emitted when input is clicked
Then, what I would like is having the index of the element click so I could change a properties in my state that match the clicked element with index X
state.filters[index].isSelected = !state.filters[index].isSelected
What I have tried :
I tried to pass the event callback in my method and see what a event.current.target would give me, but its undefined
I looked up online for like 1 hour but I haven't find anything this :/
Pretty sure I'm missing something simple... any help would be appreciated !
Thanks in advance
You might have mixed up props and events in the v-autocomplete API.
Bound props are prefixed with : like :items in your code snippet, but to capture events you should prefix them with #. So in your case, try changing the component to:
<v-autocomplete
#click="onInputClicked"
:items="items">
then, you can access the click event by adding it as an argument to onInputClicked:
onInputClicked(myClickEvent) {
console.log(myClickEvent)
}
Related
i have to fix a vuetify custom component that extends from Vue Class and includes a V-Select component. The dropdown is working fine but since its just a trigger pad to pop open modals the requirement is to reset/clear the dropdown selection after onchange event. basically i think i need to trigger the clearableCallback but i am not sure how to do it. First of all i have the problem that when i bind a method from the parent component the scope is always the parent so this refers to the extend parent component class. so i wonder how to get into the scope of the v-select component. i can not see apart from the clearable prop there is no native functionality for what i am trying to do. any hints? thanks
I am not sure I fully understand your question, but if I do, you may try using #change event on the v-select and use a method in which you open modals and reset the value of the v-select model to any desired one.
<v-select
v-model="select"
#change="someMethod"
>
</v-select>
...
methods: {
someMethod(){
this.openModal(this.select);
this.select = 0;
}
Setting the value to 0 only worked for the first change for me. Every subsequent change did not reset the displayed value. The only thing that worked consistently for me was using $nextTick. e.g.
onInput() {
this.$nextTick(() => {
this.select = 0;
});
}
It seems to be something to do with vuetify's internal implementation, and the lazyValue getting out of sync with the value prop.
As I far understand your question. The solution could be using the ref key in the v-select element and call the reset() function.
For example
In HTML
<v-select #change="handleOnSelectChange"
ref="selectedEl"/>
In vue methods
methods:{ handleOnSelectChange:function(){this.$refs["selectedEl"].reset();}}
https://react.semantic-ui.com/modules/search
Below is images of how the semantic react ui search widget looks like. In the second image, I was wondering how you can put a prompt message to indicate to the user a message on what the search bar is meant for. In this case, it's "search". When the user types in, it erases the Search and starts reflecting what the user is typing. I thought it would be defaultValue, but it seems that you can't have value and defaultValue set at the same time. I still want to be able to read what the set value is when the user types into the box.
Thanks,
Derek
You can use defaultValue as initial value in component, no problem.
Then read the user input value in event (onBlur for instance) like this:
onBlur(e) {
e.preventDefault();
console.log(e.target.name, e.target.value);
}
If you want to read value each new character pressed you can use in onSearchChange event:
onSearchChange(e) {
e.preventDefault();
console.log(e.target.name, e.target.value);
}
EDIT: included accepted answer in comment below:
Worked:
placeholder={"text"}
for Semantic React UI Search
Knockout has the default behavior of updating the associated model if you change your focus (e.g. by clicking outside the input control) after editing the value inside an input control, populated by a binding of type Value.
Here is the link to the official documentation page explanation, section Parameters:
http://knockoutjs.com/documentation/value-binding.html
Do you know a way to disable this default behavior ?
The reason behind this : Im using Models that can tell if their last update requires persistent backup by comparing the previous value to the new one.
I would like to listen to the key up event on my form inputs but if I do that, knockout triggers twice event (the default one + the key up) to update the Model and the second one is basically telling my Model to replace the value by the same value because it is already updated, which it translates to "there is no need to do persistent backup since the value didnt change".
I would gladly appreciate any help or suggestion, since Im stuck and can't find a way around :)
EDIT
Couldnt reproduce the error with bare backbone code. It seems as "super cool" said that valueUpdate should override the default Blur event that triggers when you use form controls with binding Value.
It may be a bug introduced by the library Knockback that I use to create the ViewModel.
Despite all this, just replacing the binding Value by the binding textInput did the trick. Thank you all.
Don't listen to the event, subscribe to updates, which won't fire unless the value is changed. Using the textInput binding will register every change to the value, even those done using menu items like cut and paste, when they happen.
Equivalently, you can use the value binding along with valueUpdate: 'input'
vm = {
myvar: ko.observable(),
updates: ko.observableArray()
};
vm.myvar.subscribe(function(newValue) {
vm.updates.push(newValue);
});
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input data-bind="textInput: myvar" />
<div data-bind="foreach: updates">
<div data-bind="text: $data"></div>
</div>
The render method of gapi.additnow takes as the second parameter an key-value pair object.
As in the following example:
gapi.additnow.render(
"el-id",
{"param1": "value_of_param1", "param2": "value_of_param2"}
)
Where can I find the list of available parameters to use.
I'm aiming on using the params to customize the "Integrate" button.
Not sure where you can get a full list, but the docs show "width" and "theme" as params in the example code:
https://developers.google.com/apps-marketplace/button#additnow-tag-attributes
I've been working on a custom field, which contains a list.
I have to be able to edit the selected item on the list in a richtext editor. (this is the only missing part).
I've read the topic on opening from c# code Opening Rich Text Editor in custom field of Sitecore Content Editor .
This works nice for the "add" button, since i have to open the RTE empty(with default text...), but not for the Edit button.
My aproaches are:
Somehow in the Edit button's message field list:edit(id=$Target) pass the selected index (like list:edit(id=$Target,index=$SelectedIndex), but i don't know how to populate $SelectedIndex
Somehow in the overridden HandleMessage method get the list's selected index. I'm able to get the selected value Sitecore.Context.ClientPage.ClientRequest.Form[ID of list], but thats alone not much of a help, since i won't be able to decide which one to edit if two listitem equals.
Do the richtext editor opening and handling fully in javascript. As i saw at some script in content editor, i tried to do that, but i can't understand it clearly:
richtext editor url:
var page = "/sitecore/shell/Controls/Rich Text Editor/EditorPage.aspx";
some params :
var params = "?da=core&id&ed=" + id + "&vs=1&la=en&fld=" + id + "&so&di=0&hdl=H14074466&us=sitecore%5cadmin&mo";
and the part where i'm not sure:
var result = scForm.browser.showModalDialog(page + params, new Array(window), "dialogHeight:650px; dialogWidth:900px;");
This way the RTE opens as expected (i guess i could get the selected index from javascript and pass it as a parameter later). However when i click ok, i get exception from EditorPage.js saveRichText function: Cannot read property 'ownerDocument' of null. Am i missing some parameter?
Either of the three aproaches is fine for me(also i'm open for new better ones) as soon as i'm able to do it.
Thanks in advance!
Tamas
I was able to enter some javascript into the message:
list:Edit(id=$Target,index='+document.getElementById(ID of the select using $Target ).selectedIndex+')
this way i got the index in HandleMessage.
I'm waiting for better solutions now.