I have added 2 new fields remoteKey
remoteValue
to the VoerroTagsInput.vue
which is referred to by other local vue
These are the definitions of what comes back from the db - so a db could have city object stored and it could come back as
cityId and cityName as the two fields we are searching for from a given dynamic data set -
In this gist I have included 2 other files:
- a wrapper class for
VoerroTagsInput.vue
which is referred to by other localvue
- The actual example vue calling and rewriting db data to match above sample and
VoerroTagsInput.vue
appears to locally work fine
Assuming we have remote values of
cities:[
{cityId:'1',cityName:'London' cityDescription:'We don't care not going to be used'},
{cityId:'2',cityName:'Manchester' cityDescription:'We don't care not going to be used'},
]
Or
countries:[
{countryId:'1',countryName:'London' countryDescription:'We don't care not going to be used'},
{countryId:'2',countryName:'Manchester' countryDescription:'We don't care not going to be used'},
]
We would set our remoteKey='countryId'
and remoteValue='countryName'
So this now tells vue-tagsinput to collect from remote object above key value for city object we would simply change to match what we wanted to collect.
The existing keyField valueField are used to build the actual produced tags within the users input box.
so if user wishes to collect cityId as id
[{"id":"aa","name":"bb"},{"id":"ab","name":"cc"},{"id":"some_id","name":"London"}]
Now if we declared the sample page like this:
key-field="myOddCityId"
value-field="myOddCityName"
remote-key="cityId"
remote-value="cityName"
and under created where commented if we had:
created() {
this.selectedTags = [{myOddCityId:'aa', myOddCityName:'bb'},{myOddCityId:'ab', myOddCityName:'cc'},]
},
We end up with (after I select a new one like this) within the input area
value="[{"myOddCityId":"aa","myOddCityName":"bb"},{"myOddCityId":"ab","myOddCityName":"cc"},{"myOddCityId":"new cityid","myOddCityName":"East London"}]"