I am using the Vue-google-maps package to render a google map on my site with locations on it.
To display the locations with markers I am doing it like this:
<GmapMarker v-for="hotel in hotels" :key="hotel.id"
:position="hotel._geoloc"
:clickable="true"
:draggable="false"
#click="center=hotel._geoloc"
#mouseover="show = true"
#mouseleave="show = false"
>
<gmap-info-window v-if="show">
<hotel-card :hotel="hotel" :session="session"/>
</gmap-info-window>
</GmapMarker>
But for some reason(I am new to vue), it shows every info window and ignores the v-if statement. How can I fix this issue? In what way should I render it?
just like this.
hotels = []
axios.get("hotels").then( (data) => {
hotels = data
})
just ignored that axios.get its just example that data came from backend. so as you can see hotels came from the request right or in the backend so to put a show property for that first thing is to know the condition what hotel should i show or hide.
hotels = []
axios.get("hotels").then( (data) => {
if (data.slot === 0 )
data.show = true
else data.show = false
hotels = data
})
just like that. i just check if the slot is equals to zero so i will not show that hotel. just for example. something like that
Related
I am trying to use python to automation common Monday tasks. I am able to create an item in the board but the column (type=tag) is not updating.
I used this tutorial:
https://support.monday.com/hc/en-us/articles/360013483119-API-Quickstart-Tutorial-Python#
Here is my graphql code that I am executing:
query = 'mutation ($device: String!, $columnVals: JSON!) { create_item (board_id:<myboardid>, item_name:$device, column_values:$columnVals) { id } }'
vars = {'device': device,
'columnVals': json.dumps({
'cloud_name6': {'text': cloudname} # this is where i want to add a tag. cloud_name6 is id of the column.
})
}
data = {'query' : query, 'variables' : vars}
r = requests.post(url=apiUrl, json=data, headers=headers) print(r.json())
I have tried changing id to title as key in the Json string but no luck. I fetched the existing item and tried to add exact json string but still no luck. I also tried below json data without any luck
'columnVals': json.dumps({
'cloud_name6': cloudname
})
Any idea what's wrong with the query?
When creating or mutating tag columns via item queries, you need to send an array of ids of the tags ("tag_ids") that are relating to this item. You don't set or alter tag names via an item query.
Corrected Code
'columnVals': json.dumps({
'cloud_name6': {'tag_ids': [295026,295064]}
})
https://developer.monday.com/api-reference/docs/tags
I am using a v-chip-group with v-chips to represent a tag cloud for records in my database. I have an object array with records that look something like { key:'device', count:100}. A record could have multiple tags, so as you click on a tag, a new query is made that filters on that tag, the result will then have a new tag cloud with a subset of the previous.
It looks something like this:
tag1 (1000), tag2 (100), tag3 (100)
When you click on tag1 you end up with:
tag1 (1000), tag3 (15) (no tag2 because there is no overlap between tag1 and tag2).
Here is the relevant template code:
<v-chip-group v-model="selectedTag" multiple #change="refresh">
<v-chip v-for="tag in tags" :key="tag.key" active-class="primary">
<v-avatar left class="grey">{{ tag.count }}</v-avatar>
{{ tag.key }}
</v-chip>
</v-chip-group>
The problem I have is that in the typescript I do something like this:
refresh() {
// get simple array of tag strings
const selectedTags = this.selectedTag.map((value: any) => {
if (this.tags && this.tags[value]) {
return this.tags[value].key
} else {
return null
}
}).filter((value: any) => {
return value != null
})
Promise.all([
...
ApiCall('GET', 'tags', {limit: 1000, tags: selectedTags}),
...
).then((values) => {
// decode response from server into new tags
this.tags = values[2].series['0'].values.map((item: any) => {
return {key: item.bucket, count: item.doc_count}
})
const newTags: number[] = []
this.tags.forEach((tag, index) => {
// find the new index of the previously selected tags and save them
if (selectedTags.find(st => {
return st === tag.key
})) {
newTags.push(index)
}
})
// update selectedTag with the new value
this.$set(this, 'selectedTag', newTags)
// did not work this.selectedTag = newTags
})
}
What I'm seeing is that when I click a chip, it correctly fires the #change event and calls refresh, but then when the refresh finishes, I see an additional refresh get called with an empty selectedTag, which clears my filters and recalls the above functionality.
Is there a way to get #change to fire when a chip is changed, but not fire (or filter it out) when the event is generated by changing the data referenced by v-model?
I have a function I want to pass a value to in my Vue app using v-select.
v-select is populated from a data array 'chapters'.
I then want to use the selected id to pass to a function.
I have an empty data variable 'chapterIdFilter' in my data return which is set to a value of 1 - this pre-filters my vuetify data table
How can I pass the value of the id - chapterIdFilter - from my v-select dropdown to a function in my methods so I can filter the table with it?
The chapterIdFilter is always '1'
<v-select
:model="chapterIdFilter"
:items="chapters"
item-text="locale.en.title"
item-value="id"
label="Filter by Chapter"
#change="currentDataItems(chapterIdFilter)"
/>
Method:
currentDataItems (chapterIdFilter) {
console.log(chapterIdFilter)
return this.portals.filter(val => val.chapterId === parseInt(chapterIdFilter)) // this.portals.filter(val => val.chapterId === '1')
}
UPDATE:
So the code below works as desired but I am not sure it should or know why
currentDataItems (chapterIdFilter) {
console.log(chapterIdFilter)
this.chapterIdFilter = chapterIdFilter
return this.portals.filter(val => val.chapterId === parseInt(this.chapterIdFilter))
},
You should bind v-model directive to the data property and use it with this in your method :
<v-select
v-model="chapterIdFilter"
:items="chapters"
item-text="locale.en.title"
item-value="id"
return-object
label="Filter by Chapter"
#change="currentDataItems"
/>
method:
currentDataItems () {
console.log(this.chapterIdFilter)
return this.portals.filter(val => val.chapterId === parseInt(this.chapterIdFilter))
}
I'm learning Vue.js and found this fiddle that does exactly what I want to do.
Here is the fiddle: https://jsfiddle.net/os7hp1cy/48/
I integrated this and am getting this error:
invalid expression: v-for="user in users | filterBy searchKey | paginate"
So I've done some digging and I see it has changed from version 1 to 2. However, I don't know how to fix this.
<li v-for="user in users | filterBy searchKey | paginate">{{ user.name }}</li>
I would like to replace this with something that Vue 2 will support and will work the same way.
As of Vue version 2, filters can only be used inside text interpolations ({{ }} tags). See the documentation for migrating from Vue version 1.
You can use a computed property to filter the users and use that computed property in the v-for directive instead:
computed: {
filteredUsers: function() {
let key = this.searchKey.toUpperCase();
return this.users.filter((user) => {
return user.name.toUpperCase().indexOf(key) !== -1
})
},
paginatedUsers: function() {
var list = this.filteredUsers;
this.resultCount = list.length
if (this.currentPage >= this.totalPages) {
this.currentPage = this.totalPages
}
var index = this.currentPage * this.itemsPerPage
return list.slice(index - 1, index - 1 + this.itemsPerPage)
}
}
<li v-for="user in paginatedUsers">{{ user.name }}</li>
Also, when using v-for to generate a range of numbers like you do for your page numbers, Vue version to starts the index at 1 instead of 0. So, you'll need to update the logic depending on a starting index of 0 as well.
Here's a working fiddle.
Is there any way to provide the translate-default value while using the filter instead of directive?
e.g:
How to achieve the same results as this
<h3 translate="TEST" translate-default="Not present"></h3>
with filter format
{{ 'TEST' | translate }}
How do i put the "translate-default" attribute when using the translate filter?
What i need to do is show the original text if the key is not present.
I have created a wrapping filter for that purpose:
.filter('txf', ['$translate', ($translate: angular.translate.ITranslateService) => {
return (input: string, stringIfNotAvailable: string = '') => {
const translation = $translate.instant(input);
return translation === input ? stringIfNotAvailable : translation;
};
}]);