vuejs與選擇2控件丟失

我有一個非常簡單的Vue js設置，我試圖用綁定一個select2使用指令。我寧願使用模板，但由於我無法控制的原因，我實際上被迫使用asp：DropDownList，這意味着我不得不在客戶端內置我的選擇框。vuejs與選擇2控件丟失

所以我試圖建立一個Vue.directive，但是在執行該指令後，select2並沒有找到任何地方。因爲select2被執行，所以原來的選擇框被隱藏起來，最終我沒有在頁面上顯示任何東西。

正在調試停止，並且在控制檯中沒有顯示錯誤。

 <div id="tabUserInfo"> 
      <input id="myid" type="text" required="required" ref="myid" v-model="firstName" /> 
      <span>{{firstName}}</span> 
      <select id="sel" v-select2="''" v-model="optid"> 
       <option value="1">1</option> 
       <option value="2">2</option> 
      </select> 

     </div><script type="text/javascript"> 
      $(document).ready(function() { 
       Vue.directive('select2', { 
        bind: function (elem, fieldName) { 
         $(elem).select2(); 
         debugger; 
        }, 
        unbind: function (elem) { 
         debugger; 
        } 
       }); 
       var me = "Scott"; 
       var vm = new Vue({ 

        el: '#tabUserInfo', 
        data: { firstName: 'Scott', optid:2 }, 
       }); 
      }); 

    </script>

來源

2017-09-13 Bindrid

當你沒有在頁面上顯示任何內容時，你的意思是在客戶端沒有提交select？ – Bert

就是這樣，select2代碼隱藏了原來的選擇框，然後select2並沒有放在它的位置。 – Bindrid

將掛鉤從bind更改爲inserted。看起來像select2需要DOM中的元素才能正常工作。

Vue.directive('select2', { 
    inserted: function (elem, fieldName) { 
    $(elem).select2(); 
    }, 
    unbind: function (elem) {} 
});

爲了處理數據值的更新，需要修改指令。

Vue.directive('select2', { 
    inserted: function (elem, binding, vnode) { 
    let select = $(elem) 
    select.select2(); 
    select.val(vnode.context[binding.expression]).trigger("change") 
    select.on("change", function (evt) { 
     vnode.context[binding.expression] = evt.target.value 
    }) 
    }, 
    update: function (elem, binding, vnode) { 
    let select = $(elem) 
    select.val(vnode.context[binding.expression]).trigger("change") 
    } 
});

通常情況下，vnode應該被視爲一個只讀參數，但鑑於你的情況該指令作弊一點點的約束。你的下拉現在應該是這樣的：

<asp:DropDownList runat="server" ID="Dropdown" v-select2="optid">

注意，該指令的說法是將數據綁定屬性。它取代了v-model。

來源

2017-09-13 19:10:46 Bert

謝謝@Bert，我正在玩你已經列出的內容，看看我是否可以讓它正常工作。我的真實網頁有6個選擇框（一些級聯）和6個文本框（它從來不容易） – Bindrid

@Bindrid我有一個更好的主意。將鉤子從「綁定」更改爲「插入」。 – Bert

我試過插入和安裝的方法。但是，儘管select2現在如預期顯示，並且select2正在按預期更新基本選擇框，但值（在本例中爲optid）在vue模型中未得到更新。我把一個手錶記錄到控制檯上。 – Bindrid

vuejs與選擇2控件丟失

回答

相關問題