In my vue/cli 4 / Bootstrap 4.3 app I make suggestion component(using vue-simple-suggest)
with some additive parameters and returning data I need to get slug
field of selected row and to redirect to other page
based on this slug. Search works ok for me, but when Item in selection list is selected
I see in browsers console one more request to database with whole selected item object and that
raise error.
I make:
<vue-simple-suggest
id="search_string"
v-model="search_string"
display-attribute="name"
value-attribute="slug"
:list="simpleSuggestionList"
autocomplete=off
mode="select"
#select="taskSuggestionSelected()"
></vue-simple-suggest>
and js code:
simpleSuggestionList() {
let filters={
search_string : this.search_string, // search
only_free : ( this.cbx_only_free ? 1 : 0), // additive parameters
price_min : this.tasksPriceRange[0],
price_max : this.tasksPriceRange[1],
selectedCategories : this.getSelectedCategories
}
console.log('filters::')
console.log(filters)
return axios.post(this.apiUrl + '/tasks-search', filters, this.credentialsConfig)
.then(({data}) => {
return data.tasks
})
.catch(error => {
console.error(error)
this.showPopupMessage('Tasks search', error.response.data.message, 'warn')
})
// return this.retArray
},
taskSuggestionSelected() {
console.log('\'taskSuggestionSelected par1 ::\'+par1 +" search_string::"+this.search_string::')
return false
}
1) Why error and how not to trigger request to server when item is selected and
2) how can I save/ pass slug of selected item into taskSuggestionSelected method as I need to make redirection?
"vue": "^2.6.10",
"vue-simple-suggest": "^1.10.1",
Thanks!
Related
I had a dropdown with categories. when i select a particular category second time it has to show error message like "Duplicate Category not permitted" in V-Rules.
Below is my code.
checkForDuplicateCategory(){
let newEstimates = this.newEstimates.map((estimate) => {
return estimate.category?.toLowerCase();
});
if (newEstimates.includes(this.bid.category?.toLowerCase())) {
return true;
}
return false;
}
category rules
categoryRules: [
v => !!v && !/^\s+$/.test(v) || "Invoice type is required",
v => { this.checkForDuplicateCategory() }
]
How to show error message when user try to add same category second time.
Instead of returning true or false, set an error property in your component.
Conditionaly show an alert in the ui when the property is set.
Clear the error when the user clicks the alert.
I've an api which is resolving into an array of objects, something like this
[
{flagUrl : 'http://....' , name : India , id : 7},
{flagUrl : 'http://....' , name : USA , id : 2},
{flagUrl : 'http://....' , name : Australia , id : 8},
....
]
and then Im using https://www.npmjs.com/package/react-native-select-multiple , this package to make a multi selectable list from above link.
What i want is , firstly I can display the list of country in which user can select lets say two countries ( i can control max select with the prop provided ) and then I want when user goes to next page, I can get what id user has selected in previous screen.
Currently i tried to display the same and its just the list of countries that i can show right now and then I cant get their ids. Here's what i tried so far
<SelectMultiple
items={this.state.countryList.map((x) => x.name)}
selectedItems={this.state.selectedCountries}
onSelectionsChange={this.onSelectionsChange}
maxSelect={2}
/>
where my countrylist has the above array and here are the functions that i've used
onSelectionsChange = (selectedCountries) => {
this.setState({ selectedCountries })
}
and selectedItems is just an empty array in my state.
So I just want to render a list of countries, user selects few of them and then i can send the country's selected ids to the next screen via this.props.navigate...
Let me know if you need additional information on this.
Thanks in advance :)
Your country list must be label and value like
<SelectMultiple
items={this.state.countryList.map((x) => ({ name: x.name, value:x.id })}
selectedItems={this.state.selectedCountries}
onSelectionsChange={this.onSelectionsChange}
maxSelect={2}
/>
the onSelectionsChange method should be the same
onSelectionsChange = (selectedCountries) => {
this.setState({ selectedCountries })
}
Then when you want to move to another screen then
moveToAnotherPage =() => {
const { selectedCountries } = this.state;
const { navigation } = this.props;
const ids = selectedCountries.map(item => item.value);
navigation.navigate('ScreenName', {ids});
}
"vee-validate": "^2.2.11",
"vue": "^2.5.16",
I need a simple rule, the rule should be that the input must be required,numeric and greater than 0.
So in this case, if I input 0 it validates correctly(return false), but if I input something like this 0.0 vv returns true. Even if I remove is_not:0, the result still the same.
<sui-input
type="text"
v-validate="'required|decimal|is_not:0'"
name="cellSize"
v-model="cellSize">
You could also create a custom rule, like follows.
created() {
this.$validator.extend(
'greaterThanZero',{
getMessage: field => field + ' needs to be > zero.',
validate: (value) => {
// value must be > zero
if (value > 0 ) return true;
return false;
}
});
},
then call the code on your field instance.
v-validate="'required|decimal|greaterThanZero'"
more on custom rules here:
https://vee-validate.logaretm.com/v2/guide/custom-rules.html#creating-a-custom-rule
or you could also use this following style (if you were going to add more than one rule for example). Here the code would be inserted in the area where you do your imports, i.e. directly after the script tag.
import { Validator } from 'vee-validate';
Validator.extend(
'greaterThanZero',
(value) => {
// value must be > zero
if (value > 0 ) return true;
return false;
}
);
let instance = new Validator({ greaterThanZeroField: 'greaterThanZero' });
you can now add a second rule to the style directly above using the following code:
instance.extend('greaterThan1Million', {
getMessage: field => field +' needs to be > 1,000,000',
validate: value => (value > 1000000 ? true : false)
});
instance.attach({
name: 'greaterThan1MillionField',
rules: 'greaterThan1Million'
});
again that second rule could be called as follows:
v-validate="'required|decimal|greaterThan1Million'"
I found this solution(to leave everything greater than 0)
<sui-input
type="text"
v-validate="{ required: true, regex: /^(?=.*[1-9])\d+(\.\d+)?$/ }"
name="cellSize"
v-model="cellSize">
</sui-input>
Did you try to use a regex to exclude 0 ?
Example:
<input v-validate="{ required: true, regex: /[1-9]*/ }">
How do I get an element's inner HTML from an elementId using browser object?
Is there something like elementIdHtml available in the WebdriverIO API?
The getHTML link for v4 is returning 403 Forbidden.
my goal is that i need to get all text inside all a._3cnp from an elementId
example html
<div class="container">
<a class="_3cnp">first link</a>
<a class="_3cnp">second link</a>
<a class="_3cnp">third link</a>
</div>
need to convert that to ["first link", "second link", ..]
i have the .container elementId already
this is what i did
.then(() => browser.elementIdElements(someElementId, 'a._3cnp'))
.then(buttonElem => {
console.log('->', buttonElem)
console.log('-->', buttonElem.getHTML)
buttonElem.getHTML().then(x => console.log('---->', x))
return buttonElem.value
})
result of elementIdElements is
buttonElem
{ sessionId: '2e2f144c8895a03da1b8df92f4613a33',
status: 0,
value:
[ { ELEMENT: '0.6603119466268468-24',
'element-6066-11e4-a52e-4f735466cecf': '0.6603119466268468-24' } ],
selector: 'a._3cnp' }
but buttonElem.getHTML is undefined
im using webdriverio standalone from botium-webdriverio-connector
LE:
Change your code accordingly to the following:
.then(() => browser.elementIdElements(someElementId, 'a._3cnp'))
.then(buttonElem => {
// buttonElem's 'value' will contain a list of all the matching elements
// thus, you have to call getHTML() on each item from 'value'
// the following will return the HTML of the first matching element
console.log('\nPrint element HTML: ' + buttonElem.value[0].getHTML());
return buttonElem.value[0].getHTML();
})
A better approach would be to loop between them & print the HTML:
.then(() => browser.elementIdElements(someElementId, 'a._3cnp'))
.value.forEach(buttonElem => {
console.log('\nPrint element HTML: ' + buttonElem.getHTML());
return buttonElem.getHTML();
})
The .getHTML() property is scoped to all the ELEMENT objects. For the sake of more didactical approach, I'm going to consider the task to be manipulating the HTML code found in a series of list items (<li>), from am unordered list (<ul>).
So you can do the following:
browser.getHTML('ul.ourList li.ourListItems') (this will return a list of all the <li>'s HTML code)
browser.element('ul.ourList li.ourListItems').getHTML() (this will return the first <li>'s HTML code)
$('ul.ourList li.ourListItems').getHTML() (this is the equivalent of the command above, only a relaxed version)
If you need to iterate through all the <li>s & get the HTML, do this:
let locator = 'ul.ourList li.ourListItems';
browser.elements(locator).value.forEach(elem => {
let elemHTML = elem.getHTML();
console.log( JSON.stringify(elemHTML) );
elemHTML.doSomethingWithIt();
})
where, elem will is an object with the following format:
{ ELEMENT: '0.285350058261731-1',
'element-6066-11e4-a52e-4f735466cecf': '0.285350058261731-1',
selector: 'ul li.fw-item.fz-16.lh-36.pos-r',
value: { ELEMENT: '0.285350058261731-1' },
index: 0
}
As the user types an artist name to search we want to display a drop-down list of suggestions based on what the user has typed so far.
For example, if the user has so far typed "Bob Dy" we would like to list "Bob Dylan","Bob Dylan & The Band", and "Willie Nelson;Bob Dylan" just like the standard Spotify Radio App does.
We are trying to use the Search API call to retrieve the list of artists to display. I assume we want to use the models.SEARCHTYPE.SUGGESTION option however when using that option we always get an empty list. The models.SEARCHTYPE.NORMAL option does return a list when there is an exact match such as in the case of entering "Bob" or "Bob Dylan" but not "Bob Dy".
Could you please tell us what we are doing wrong?
The documentation we are using is:
http://developer.spotify.com/download/spotify-apps-api/reference/833e3a06d6.html
Here is the code we are using:
var search = new models.Search('artist:"Bob Dy"');
search.localResults = models.LOCALSEARCHRESULTS.IGNORE;
search.searchArtists = true;
search.searchAlbums = false;
search.searchTracks = false;
search.searchPlaylists = false;
search.pageSize = 10;
search.searchType = models.SEARCHTYPE.SUGGESTION;
//search.searchType = models.SEARCHTYPE.NORMAL;
search.observe(models.EVENT.CHANGE, function() {
console.log('[models.EVENT.CHANGE observe]', search.artists);
});
Seems like the normal search input in Spotify doesn't support auto suggest for prefixed searches like "artist:Bob Dy". The code below works for me though.
var search = new models.Search('Bob Dy', {
'localResults' : models.LOCALSEARCHRESULTS.IGNORE,
'searchArtists' : true,
'searchAlbums' : false,
'searchTracks' : false,
'searchPlaylists' : false,
'pageSize' : 10,
'searchType' : models.SEARCHTYPE.SUGGESTION
});
search.observe(models.EVENT.CHANGE, function() {
search.artists.forEach(function(artist) {
console.log('[models.EVENT.CHANGE observe] - Found artist %s',
artist.name);
});
});
// Do the search, nothing will be fetched
// if this row is not executed.
search.appendNext();