NO LONGER MAINTAINED: Please migrate to http://chat.vuejs.org/ for the new and improved community chat
and jqueryUI
it's ok now
$('#ac').autocomplete({
source: function( request, response ) {
var matches = $.map( acList, function(acItem) {
if ( acItem.name.toUpperCase().indexOf(request.term.toUpperCase()) === 0 ) {
return acItem.name;
}
});
response(matches);
}
});
哎
var acList = [{name:'smart',id:1},
{name:'oversmart',id:1}
// {name:'smartland'},
// {name:'undersmart'},
// {name:'verysmart'}
];
$('#ac').autocomplete({
source: function( request, response ) {
var matches = $.map( acList, function(acItem) {
if ( acItem.name.toUpperCase().indexOf(request.term.toUpperCase()) === 0 ) {
return acItem.name + acItem.id ;
}
});
response(matches);
}
});
like this ?
@Zerka1982
Hi everyone, in case you need to use Vue 3, Vite and Apollo Client (graphql)
https://dev.to/aisone/getting-vite-vue-3-and-apollo-client-3-running-51bp
@RobinYang11 it is not that simple. Vue uses its template compiler to create VNodes: https://www.npmjs.com/package/vue-template-compiler
but you might be able to use it as a base for something like the vue template compiler
html-parser?
var search = document.getElementById("searchID");
var matchList = document.getElementById("searchBodyID");
// Search Data & Filter it
var dataResponse = <#dataset identifier="testQuery">;
console.table(dataResponse);
// Search Data & Filter it
function searchElement (query) {
var result = dataResponse.filter( word => {
var regex = new RegExp(`^${query}`, 'gi');
return word.name.match(regex);
//return word.name.toLowerCase().startsWidth(query);
});
if(query.length === 0) {
result = [];
matchList.innerHTML = '';
}
outputHtml(result);
// Show result in HTML
function outputHtml (result) {
if(result.length > 0) {
const html = result.map(match => `
<div id="${match.id}" class="card card-body mb-4" onclick="runFunction('${match.id}', '${match.name}','${match.typename}')">
<div class="resultNameCL">${match.name}</div>
<span>${match.typename}</span>
<span class="resultPerforanceCL" style="background:#${match.rangecolor}"></span>
</div>
`).join('');
console.log(html);
matchList.innerHTML = html;
}
}
};
function runFunction (id, name, typename) {
console.table(id, name, typename);
}
search.addEventListener('input', (search) => searchElement(search.target.value));
ok, I will post my question here anyhow, maybe somewone knows...
I use the vuex-orm with the plugin Vuex ORM IsDirty / IsNew plugin
In the plugins option, I desable exposeFlagsExternally
VuexORM.use(VuexORMisDirtyPlugin, {
isNewFlagName: 'IsNew',
isDirtyFlagName: 'IsDirty',
exposeFlagsExternally: false // <--- this is set to false
});Now my problem. $isDirty and $isNew is not in the store anymore.
When I update a value, the change of record.$isDirty is not reflected in the view.
I use Vue2 with @vue/composition-api
my Item is handled via computed in the setup()
...
setup(props, context) {
...
return {
item: computed(() => this.query().whereId(id).first())
}
}
if you use reflect-metadata
just define your component as class with vue-property-decorator
just started studying vue
you need to do a check on the main page. If the sum of the two forms exceeds 100, you need an error message to appear
Actually, I just say VuexORM above and it sounds like a nice solution - I see an old issue vuex-orm/vuex-orm#130 about JSONAPI. Has anyone used VuexORM with JSONAPI recently?
// TESTING FUNCTION Up & DOWN Keys
function scrollUpandDown () {
var listElm = document.getElementById("searchResultsID")
// Mark first list item
listElm.firstElementChild.focus()
// Event listener
window.addEventListener('keydown', onKeyDown)
// Event callback
function onKeyDown(e){
e.preventDefault()
var selectedElm = document.activeElement,
goToStart,
// map actions to event's key
action = {Up:"previous", Down:"next"}
selectedElm = selectedElm[action[e.key] + "ElementSibling"];
// loop if top/bottom edges reached or "home"/"end" keys clicked
if( !selectedElm || e.key == 'Home' || e.key == 'End' ){
goToStart = action[e.key] == "next" || e.key == 'Home'
selectedElm = listElm.children[goToStart ? 0 : listElm.children.length - 1]
}
selectedElm.focus()
}
}