An help on your example

[Silvio]

Hi,

I'm trying one of your examples using toolbar:

https://ej2.syncfusion.com/vue/demos/#/material/menu/toolbar-integration.html

I'd like to bind with 2-binding v-model the input textbox (searchTemplate) with a data that I'd like to insert in the script's data.

Let's say I name this variable searchData:

searchData:"foo"

Your template now is:

searchTemplate: '<div class="e-input-group"><input class="e-input" type="text" placeholder="Search" /><span class="e-input-group-icon em-icons e-search"></span></div>',

If I change it like this:

searchTemplate: '<div class="e-input-group"><input class="e-input" type="text" placeholder="Search" v-model="searchData"/><span class="e-input-group-icon em-icons e-search"></span></div>',

it does not work.

Can you help me ?

[Silvio]

Related to the same example,

I've tried to change "input" with "ejs-autocomplete", but the element seems not to be taken into account by VUE and the input is not displayed at all.

I'm guessing the problem is the same as for v-model.

How is it possible to put an ejs-autocomplete with v-model and datasource on the toolbar ?

[Vinitha Devi Murugan]

Hi Silvio, 

 

Greetings from Syncfusion. 

 

In our end we rendered the templates as an individual vue component so that we can’t able to access the model value inside the template from parent component. We have prepared the workaround solution for your requirement with autoComplete control and same can be available in below link. 

 

https://codesandbox.io/s/vue-template-z58ek  

 

Kindly try the able sample and let us know if you need further assistance on this. 

 

Regards, 

M.Vinitha devi.