vue 와 전통 jquery 플러그 인 충돌 을 어떻게 해결 합 니까?
예 를 들 어 jquery 기반 select 2 플러그 인 은 vue 에서 단독으로 사용 하 는 데 많은 문제 가 있 습 니 다.사실은 이러한 플러그 인 에 대해 vue 의 사용자 정의 명령 과 구성 요소 로 포장 하여 충돌 문 제 를 해결 할 수 있 습 니 다.공식 vue 1.0 과 2.0 의 두 가지 예 를 인용 하여 배 워 보 세 요.
예 1.0 예 2.0
큰 성 과 를 거두다.vue 1 을 바탕 으로 하 는 드 롭 다운 선택 에 대해 vue 공식 적 인 예 를 들 면 됩 니 다.다 중 선택 에 대해 서 는 아래 에 자신 이 쓴 것 을 보 세 요.핵심 은 명령 대상 의 el,vm 등 으로 select 2 가 변 경 된 select 드 롭 다운 목록 의 해당 대상 을 가 져 오 는 것 입 니 다.관건 은 jquery 로 원생 요 소 를 포장 한 후.val()로 다 중 선택 치 를 가 져 오 는 것 입 니 다.
<body>
<div id="el">
<p>Selected: {{selected}}</p>
<select v-select3="selected" multiple class="app1" >
<option value="0">default</option>
<option v-for="o in options" :value="o.id">{{ o.text }}</option>
</select>
<p>Selected: {{market}}</p>
<select v-select3="market" multiple class="app2" >
<option value="0">default</option>
<option v-for="o in markets" :value="o.id">{{ o.text }}</option>
</select>
</div>
<script>
Vue.directive('select3', {
twoWay: true,
priority: 1000,
params: ['options'],
bind: function () {
var self = this;
$(this.el)
.select2()
.on('change', function () {
self.set($(self.el).val());
console.log($(self.el).val());
if ( self.expression == 'selected') {
self.vm.market = [];
}
})
},
update: function (value) {
$(this.el).val(value).trigger('change')
},
unbind: function () {
$(this.el).off().select2('destroy')
}
})
var vm = new Vue({
el: '#el',
data: {
selected: 0,
market: '',
options: [
{ id: 1, text: 'hello' },
{ id: 2, text: 'what' }
],
markets: [
{ id: 1, text: ' ' },
{ id: 2, text: ' ' }
]
}
});
setTimeout(function () {
vm.market = 0;
}, 0);
</script>
</body>
또한 한 페이지 에 서 는 SSpa 의 show 를 고려 할 때 상태 비트 vm.isInit 를 설정 합 니 다.기본 옵션 을 초기 화하 면 onchange 에서 관련 변경 사항 이 발생 했 는 지 판단 할 때 일부 값 의 비우 기 및 가 져 오지 않 음 을 표시 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
