We Keep Coding

How to change several data items to true one at a time in Vuejs

I am very new to Vuejs and I am wondering how I can make this work in Vuejs
I have a set of different data:
data() {
return {
recents: false,
frontend: false,
backend: false,
devops: false,
tutoriais: false,
};
},
And when I click on a button it invokes openOptions() and it changes a specific property to true or false.
openOptions(e) {
const optionClicked = e.target.text.toLowerCase();
this[optionClicked] = !this[optionClicked];
},
However, I can't have 2 properties being true. I need to set everything else to false but I am having a hard time understanding how I can make this work. So basically what I need is
set the one I clicked to true
and the rest to false
Can anyone help me with that?

You can first create an object as a single entity, I've used an object with name as collection
Live Demo
data() {
return {
collection: {
recents: false,
frontend: false,
backend: false,
devops: false,
tutoriais: false,
},
};
},
then, you can attach click listener on each elment(if you want, you can also attach a single click listener on its parent)
<button
v-for="[key, value] in Object.entries(this.collection)"
:key="key"
v-on:click="() => openOptions(key)"
>
{{ key }}
{{ value }}
</button>
when user click on any button then only its value will set to true and rest others are false as:
openOptions(clickedKey) {
Object.keys(this.collection).forEach((key) => {
this.collection[key] = key === clickedKey ? true : false;
});
},

How to specify a list of custom tokens to list for autocompletion in Ace Editor?

After following the setup for autocompletion with Ace Editor, I have it working with react-ace. However, I need some custom tokens to be available in the built-in autocomplete list.
The repository for react-ace has these properties defined as
enableBasicAutocompletion: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
enableLiveAutocompletion: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
but what is this array ?
I have tried setting enableBasicAutocompletion={ ['custom'] }, and enableBasicAutocompletion={ [ (...args) => console.log(args) ] } but both fails with an error about getCompletions not a function.
How can I add these custom autocomplete keywords to the list?
<AceEditor
name={ this.uniqueName }
mode="javascript"
theme="github"
onChange={ onChange }
enableBasicAutocompletion
enableLiveAutocompletion
/>

use editor.completers array to add a new completer that returns the completions you want
editor.completers.push({
getCompletions: function(editor, session, pos, prefix, callback) {
var completions = [];
// we can use session and pos here to decide what we are going to show
["word1", "word2"].forEach(function(w) {
completions.push({
value: w,
meta: "my completion",
});
});
callback(null, completions);
}
})

Just import this!
import "ace-builds/src-noconflict/ext-language_tools"
And write this code in your render function
<AceEditor
mode="java"
theme="github"
onChange={onChange}
name="UNIQUE_ID_OF_DIV"
editorProps={{ $blockScrolling: true }}
setOptions={{
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
enableSnippets: true
}}

bootstrap datetimepicker need to add keyBinds conditionally

I need to add the keyBinds for delete and enter button properties conditionally.
I tried using the Object.assign() method, but not sure how to get hold of datetimepicker object associated with my input control, and how do I enable or disable keyBinds conditionally.
var $inputCtrl = $('.inputCtrl');
$inputCtrl.datetimepicker({
locale: 'en-US',
format: 'DD-MM-YYYY',
useCurrent: false,
keepInvalid: true
});
Object.assign($inputCtrl.data("DateTimePicker"), bConditionalDeleteTest && {keyBinds: {'delete': null}});
if we initialize this object statically, it would be
$('.inputCtrl').datetimepicker({
locale: 'en-US',
format: 'DD-MM-YYYY',
useCurrent: false,
keepInvalid: true,
keyBinds: {'delete': null} /*this would disable the default Delete key behavior of the control.*/
});

You can simply use keyBinds function.
keyBinds()
Returns a string variable with the currently set options.keyBinds option.
keyBinds(object)
Takes an object value.
Allows for several keyBinding functions to be specified for ease of access or accessibility. See the options page for defaults.
You can have something like:
var $inputCtrl = $('.inputCtrl');
$inputCtrl.datetimepicker({
locale: 'en-US',
format: 'DD-MM-YYYY',
useCurrent: false,
keepInvalid: true
});
if( bConditionalDeleteTest ){
$inputCtrl.data("DateTimePicker").keyBinds({'delete': null});
}

Select2 dropdown allow new values by user when user types

The select2 component can be configured to accept new values, as ask in Select2 dropdown but allow new values by user?
And you can see it at: http://jsfiddle.net/pHSdP/646/ the code is as below:
$("#tags").select2({
createSearchChoice: function (term, data) {
if ($(data).filter(function () {
return this.text.localeCompare(term) === 0;
}).length === 0) {
return {
id: term,
text: term
};
}
},
multiple: false,
data: [{
id: 0,
text: 'story'
}, {
id: 1,
text: 'bug'
}, {
id: 2,
text: 'task'
}]
});
The problem is that the new value is only added to the list if you enter new value and press enter, or press tab.
Is it possible to set the select2 component to accept this new value when use types and leave the select2. (Just as normal html input tag which keeps the value which you are typing when you leave it by clicking some where on the screen)
I found that the select2 has select2-blur event but I don't find a way to get this new value and add it to list?!

Adding attribute selectOnBlur: true, seems to work for me.
Edit: glad it worked for you as well!

I am using Select2 4.0.3 and had to add two options:
tags: true,
selectOnBlur: true,
This worked for me

And to be able to submit multiple new choices together with the existing ones:
select2({tags: true, selectOnBlur: true, multiple: true})

How to fetch selected dates from jquery datePicker

In my App,we are rendering DatePicker(calender) with the following code.It's coming perfectly.
$('#date2').DatePicker({
flat: true,
date: [],
current: '2008-07-31',
format: 'Y-m-d',
calendars: 1,
mode: 'multiple',
starts: 0
});
After I render,it's coming like this.Still Html guy not yet implemented CSS.From the calendar user can select multiple dates.
we are using Backbone and Marionette in Application.What I want If user select any date from calender, needs to fire an event inside the callback function wants to console selected dates().For This I tried with following code but it's not working.
events:{
"select #date2":"consoleDates"
},
consoleDates:function(event){
console.log($(event.target).val());
}
Also I tried with change event,This is also not firing.
How can I fix this.

Use onselect. Try this:
$('.selector').datepicker({
onSelect: function(date) {
alert(date);
}
});
Update: Looking at the doc, the property for this is onChange:
onChange: function(formated, dates){
console.log(dates);
}

Ok, if you really want to use this plugin, it won't fire any DOM events. Because this plugin is little dated, I think the concept of CustomEvents haven't been introduced yet. Anyway, you would have to actually bind a custom event in the instantiation of the code. So it should look like so:
$('#date2').DatePicker({
flat: true,
date: [],
current: '2008-07-31',
format: 'Y-m-d',
calendars: 1,
mode: 'multiple',
starts: 0,
onChange: function(formatted, dates){
$('#date2').trigger('datePick', arguments);
}
});
Then in Backbone it should look like so:
events:{
"datePick #date2":"consoleDates"
},
consoleDates:function(event, formatted, dates){
console.log(formatted.join(', '));
}