ホームページ > ウェブフロントエンド > jsチュートリアル > layui フォームの動的レンダリングと vue.js の間の競合解決 (コード付き)

layui フォームの動的レンダリングと vue.js の間の競合解決 (コード付き)

不言
リリース: 2018-08-25 15:30:56
オリジナル
6638 人が閲覧しました

この記事の内容は、layui フォームと vue.js の間の競合解決方法に関するものです。必要な方は参考にしていただければ幸いです。助けます。

今回は、layui と vue.js を組み合わせてプロジェクトを実行したところ、フォームで送信された選択が変更され、その選択が動的にレンダリングされた場合、ページがデータをレンダリングできないことがわかりました。
コミュニティで、layui フォームと vue.js フォームの間の競合に対するいくつかの解決策を見つけました。これは、vue.js 更新のフック関数を使用するという非常に簡単な方法です
コードは次のとおりです

methods: {
    getResponse (){
        let _this = this;
        axios.get(window.location.pathname)
            .then(function(res){
                if (res.status == 200){
                    _this.role_list = res.data.role_list;
                    //这里是从服务端请求拿到数据,不用理睬
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    },
},
//下面是重点
updated: function () {
    this.$nextTick(function () {
       layui.use(['form'], function(){
           layui.form.render('select')
       });
    });
}
ログイン後にコピー

もちろんです。 、シナリオが異なり、layui.form を介して選択を監視するなど、記述方法も異なる場合があります。その後、レンダリングすることも解決策です

関連する推奨事項:

ドロップダウンを動的に追加するモジュールlayuiに基づく選択ボックス

layimを使用して履歴レコードを初期化する方法(コード付き)

以上がlayui フォームの動的レンダリングと vue.js の間の競合解決 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート