Vue v-on: прослушиватель щелчка не работает в раскрывающемся дереве Kendo UI ASP.NET Core - PullRequest
Новая
       11

Vue v-on: прослушиватель щелчка не работает в раскрывающемся дереве Kendo UI ASP.NET Core

0 голосов
/ 17 июня 2019

У меня есть веб-приложение ASP.NET Core, которое использует элементы управления Kendo UI ASP.NET Core.Я пытаюсь использовать Vue.js для замены JQuery, поскольку то, что мы пытаемся сделать с JQuery, - это добавить реактивность к страницам, что Vue.js может сделать из коробки с очень небольшим количеством кода по сравнению с JQuery.Однако у меня возникают проблемы с добавлением v-on: click в элемент управления DropDownTree ().Я использовал этот подход для добавления моей v-модели, v-on: click, v-show, среди других без проблем директив LINK .Однако, по какой-то причине, когда я добавляю v-on: click к элементу управления DropDownTree (), ничего не происходит, я щелкаю везде в DropDownTree (), но ничего не срабатывает, и в окне консоли нет ошибок (Chrome Dev Tools).Мысли?

Вот мой код ... 

@(Html.Kendo()
                      .DropDownTree()
                      .Name("navigation-decision-drop-down-list")
                      .AppendHtmlAttributes(new Dictionary<string, object> {
                                                { "class", "kendo-dropdown action-dropdown mb-0" },
                                                { "v-on:click", "alert('fff')" }
                                            })
                      .Height("auto")
                      .Items(dropdowntree =>
                      {
                          dropdowntree.Add()
                                      .Text(Localizer["dddd"].Value)
                                      .HtmlAttributes(new Dictionary<string, object> {
                                           { "v-on:click", "dropDownListNavigationChanged('dddd')" }
                                      })
                                      .Selected(true)
                                      .Expanded(true)
                                      .Items(root =>
                                      {
                                          root.Add()
                                              .Text(Localizer["aaaa"].Value)
                                              .HtmlAttributes(new Dictionary<string, object> {
                                                   { "v-on:click", "dropDownListNavigationChanged('aaaa')" }
                                               });
                                      });

                          dropdowntree.Add()
                                      .Text(Localizer["pppp"].Value)
                                      .HtmlAttributes(new Dictionary<string, object> {
                                           { "v-on:click", "dropDownListNavigationChanged('pppp')" }
                                       });

                          dropdowntree.Add()
                                      .Text(Localizer["rrrr"].Value)
                                      .HtmlAttributes(new Dictionary<string, object> {
                                           { "v-on:click", "dropDownListNavigationChanged('rrrr')" }
                                       });
                      })
                      .Deferred()
                 )

Вот мой метод JS ... 

new Vue({
    el: '#app',
    data: {
            navigation: {showSummary: true, showApprove: false}
        },
    methods: {
        dropDownListNavigationChanged(e) {
            switch (e) {

                case 'aaaa':
                    this.navigation.showSummary = false;
                    this.navigation.showApprove = true;
                    break;

                default:
                    this.navigation.showApprove = false;
                    this.navigation.showSummary = true;                    
            }
         }
       });
...