Ion-select compareWith NOT firing

Ionic Framework Ionic Vue
#1

I have a data id from a mondo db, where I store just the _id of the item in the data record for my object.
its a multi-select, so there might be more than 1

I use ion-select, and the select-option to be able to compare the data record _id, with the list of fields being shown

this worked in V4 angular

angular template segment

	<ion-col >
		<ion-select  
                      title="Tags" 
                      multiple="true"  
                      id="vtags" 
                      [(ngModel)]="thisviewer.Tags" 
    		          [compareWith]="checkSelectedTag" 
                      okText="Okay" 
                      cancelText="Dismiss"
                      >
                         <ion-label>Tags</ion-label>
			             <ion-option  
                               *ngFor="let tag of data.Tags" 
                               value="{{tag._id}}">{{tag.value}}
                         </ion-option>    
		</ion-select>
     </ion-col>

vue template segment

				<ion-col>
					<ion-select
						title="Tags"
						multiple="true"
						id="vtags"
						v-model="viewercopy.Tags"
						compareWith="checkSelectedTag"
						compare-with="checkSelectedTag"
						okText="Okay"
						cancelText="Dismiss"
						>
						<ion-label>Tags</ion-label>
					    <ion-select-option 
                            v-for="(tag) in tags" :key="tag.id"
							:value="tag.id" >{{tag.Value}}
						</ion-select-option>
					</ion-select>
				</ion-col>

methods

	methods: {
		checkSelectedTag(tag1, tag2){
			console.log('check tag, comparing '+tag1+' with '+tag2)
			return tag1==tag2;
		},
		closeModal() {
			console.log("in closemodal");
		},
		saveModal() {
			console.log("in savemodal");
		}
	},

the save/close functions fire on push button in the mode
the OKAY and Dismiss buttons work on the options modal.
I have tried the property as
compareWith=
compare-with=

only the 1st three should be selected, but the compareWith function is never called.

in the angular model, i used ngModel to connect to the modals data
in vue, it should be v-model

#2

show the user the actual Name, not its id as stored in the data record
the data object in the modal is

      Viewers: [
        {
          Name: "viewer1",
          id: 1,
          Advance: 5,
          Tags: [12, 22, 32],
          ImageRefreshRate: 10,
          Active: false
        },

and the list of ‘tags’ in the db is

      Tags: [
        { Value: "tag1", id: 12, Description: "tag 1" },
        { Value: "tag2", id: 22, Description: "tag 22" },
        { Value: "tag3", id: 32, Description: "tag 32" },
        { Value: "tag4", id: 42, Description: "tag 42" },
        { Value: "tag5", id: 52, Description: "tag 52" },
        { Value: "tag6", id: 62, Description: "tag 62" }
      ]

so we loop over (v-for) the db tags, and if the item tag array elment matches should be checked, else not checked

#3

the doc is unclear

By default, the select uses object equality (===) to determine if an option is selected. This can be overridden by providing a property name or a function to the compareWith property.

but then later in properties

**compareWith**
Description	
A property name or function used to compare object values

Attribute	**compare-with**
Type	((currentValue: any, compareValue: any) => boolean) | null | string | undefined
#4

I have managed to work around all my other blocking troubles except this one…

can’t save new data without this working…

my working project is here

open the app, select the 1st row of the data , single click
click the magnifying glass icon top left, dialog pops up,
drop down the entry for the tags
only the ones represented for this user should be checked
one should be able to come in here and add/remove assigned tags
(you will see the default data, as u don’t have the server locally)

Screenshot at 2020-10-27 22-00-31
Screenshot at 2020-10-27 22-00-311663×976 208 KB

#5

ok, once again the doc is missing a point… its

	<ion-col>
					<ion-select
						title="Tags"
						multiple="true"
						id="vtags"
						v-model="viewercopy.Tags"
						:compareWith="checkSelectedTag"  // notice the leading colon
						okText="Okay"
						cancelText="Dismiss"
						>
						<ion-label>Tags</ion-label>
					    <ion-select-option 
                            v-for="(tag) in tags" :key="tag.id"
							:value="tag.id" >{{tag.Value}}
						</ion-select-option>
					</ion-select>
				</ion-col>

now… it does filter for display properly, and the single selection popup DOES click the only selected
the multi-select doesn’t check any

i notice in the console logs, where I log the compare, it passes in ALL the items a couple times
when the dropdown is opened

comparing 5d3885dacc871e187172505b with 5d3885dacc871e187172505b,5dd4020b5c3eb90f84d85a19
comparing 5d3885e9cc871e187172505c with 5d3885dacc871e187172505b,5dd4020b5c3eb90f84d85a19
comparing 5dd4020b5c3eb90f84d85a19 with 5d3885dacc871e187172505b,5dd4020b5c3eb90f84d85a19
comparing 5f987c4e70de80503428984f with 5d3885dacc871e187172505b,5dd4020b5c3eb90f84d85a19

comparing 5d3885dacc871e187172505b with 5d3885dacc871e187172505b
comparing 5d3885dacc871e187172505b with 5dd4020b5c3eb90f84d85a19
comparing 5d3885e9cc871e187172505c with 5dd4020b5c3eb90f84d85a19
comparing 5dd4020b5c3eb90f84d85a19 with 5dd4020b5c3eb90f84d85a19

one in the data doesn't seem to be checked (ending 8984f below), except with the multi input

[
{
“_id”: “5d3885dacc871e187172505b”,
“value”: “Kristi”,
“description”: “daughter”
},
{
“_id”: “5d3885e9cc871e187172505c”,
“value”: “Charlie”,
“description”: “granson”
},
{
“_id”: “5dd4020b5c3eb90f84d85a19”,
“value”: “Sam”,
“description”: “string”
},
{
“_id”: “5f987c4e70de80503428984f”,
“value”: “sample_tag_name”,
“Description”: “sample tag description”,
“Value”: “sams test”
}
]

#6

ok, that multiple items made me think about testing them as an array … voila is works

the check routine


		checkSelectedTag(tag1, tag2){			
            // check if the secondary tag is an array of multiple
			if(Array.isArray(tag2))
                //   check the array                   
				return tag2.includes(tag1)
            // compare individual strings
			return tag1===tag2;
		},