prostudy

V-툴팁:메서드에서 팝업 닫기 VueJS에서는 팝오버에 v-backtip(https://github.com/Akryum/v-tooltip)을 사용하고 있다. 팝업을 닫기 위해, 그들은 "라고 불리는 지시어를 제공한다.'v-close-popover'팝업 창을 닫기 위해 팝업 버튼/링크에 할당할 수 있다.이거 잘 된다. 그러나 나는 이 팝업을 Vue 메소드에서 닫아야 하는 요구사항이 있다.하지만 나는 그 방법에서 어떻게 포포오버의 닫기를 유발하는지 알지 못한다.이것이 네가 이것을 성취할 수 있는 방법이다.마우스 오버 이벤트에 툴팁을 표시하고, 마우스 이탈 이벤트에 툴팁을 표시한다.template->에서 인스크립트->> data() { return { isOpen: false, }; }, methods:{ s..

루트 Vue 구성 요소의 Vue.use vs Vue.component Vue.use호출하는 동안 기능 전역화Vue.component루트 Vue 구성 요소(일반적으로)app.vue)도 같은 효과를 가지고 있다.두 가지 모두를 사용하는 샘플 앱을 본 적이 있다(많은 경우).Vue.component그리고Vue.use루트 js 내의 호출).구글링을 해왔지만 이 패턴을 설명하는 것은 아무것도 보이지 않는다. (서브)의 차이는 무엇인가?우선 다음을 참조하십시오. https://vuejs.org/v2/api/#Vue 구성 요소 https://vuejs.org/v2/api/#Vue-use '기능성 글로벌화'라고 말하기는 좀 애매하다.각각의 경우에 그것이 무엇을 의미하는지 좀 더 정확하게 짚을 필요가 있다. Vue.co..

Vuejs 계산된 속성 및 jquery ui 정렬 가능 문제 내 프로젝트에서 나는 3개의 구성요소를 가지고 있다.ul목록. 또한 나는 어떤 종류의 데이터 배열과 항목이 있고, 각 항목에는 몇 가지 속성이 있다.제 목표는 다음과 같다. 기본 배열의 항목을 세 개의 목록으로 배포 각 항목에는 항목이 속한 목록을 알려주는 속성이 있으므로 목록 간에 항목을 드래그 앤 드롭하고 그에 따라 항목 데이터를 업데이트할 수 있도록 설정 많은 코드를 복사 붙여넣는 대신, 나는 다음과 같은 간단한 예를 사용하여 jsfiddle에서 잘못된 행동을 재현하려고 했다. https://jsfiddle.net/89pL26d2/4/ 중요한 건, 끌어서 놓을 때, 한 개 대신 정확히 두 개의 물건을 끌고 온다는 겁니다. 그러나 계산된 속..

간단한 Vue.js 계산된 속성 설명 나는 Vue.js를 처음 접하는 것은 아니지만, 처음 놓친 것은 무엇이든 찾아내기 위해 다시 문서를 뒤지고 있다.계산된 속성 사용의 기본 예제 섹션에서 이 문구를 발견했다. 일반 속성처럼 템플릿에서 계산된 속성에 데이터 바인딩할 수 있다.Vue는 알고 있다.vm.reversedMessage에 달려 있다vm.message에 의존하는 모든 바인딩을 업데이트 할 것이다.vm.reversedMessage할 때vm.message변화들그리고 가장 좋은 부분은 이 의존 관계를 선언적으로 만들어냈다는 겁니다. 계산된 게터 기능은 부작용이 없기 때문에 테스트하고 이해하기 쉽다는 겁니다. 우리가 이 의존 관계를 선언적으로 만들어냈다는 부분은, 계산된 게터 함수는 부작용이 없고, 내가 ..

오류 'CR' 더 예쁘거나 예쁜 Visual Studio 코드 삭제 이 명령을 사용하여 Nuxt.js를 설치한 후npx create-nuxt-app 모든 것이 잘 작동하지만, 내가 스타일 코드를 바꾸려고 했을 때layout/default.vue나는 이런 실수를 했다. 241:9 오류 삽입⏎더 예쁜/더 예쁜 Visual Studio Code를 사용하고 있어서 설정을Preferences > settings > Extensions > Vetur, 나는 그것을 바꿨다.Format > Default Formatter: CSS = none그리고Default Formatter: HTML = none. 그래도 문제는 여전하다.GitHub에서 찾은 이 명령을 사용하여 수정하려고 했다.npm run lint -- --fi..

Vue - 외부 제어를 기반으로 동적으로 활성화하는 방법 어떤 버튼을 눌렀는지에 따라 탭을 동적으로 활성화하려면 어떻게 해야 한다.나는 그것을 사용하고 있다.로부터bootstrap-vue아래 내 예시 코드에서step변수는 누른 버튼에 따라 변경되지만 탭은 항상 활성화된다. step 1 step 2 step 3 Step 1 Step 2 Step 3 사용 시도v-model… 대신에 말한 바와 같이active다음과 같이 받침하다. step 1 step 2 step 3 그리고 당신의 발걸음은 다음부터 시작해야 한다.0 Step 1 Step 2 Step 3 네가 사용할 수 있는 다른 방법이 있어. 그리고 설정하다selcted_tab_name다음과 같은 경우: Activate first tab 나는 이 방법이 더 ..

VueJS에서 테스트를 실행할 때 오류 발생: 경로 탐색 중 검색되지 않은 오류 템플릿에 라우터 구성 요소가 있을 때마다 장치 테스트에서 이 경고가 계속 표시됨: 알 수 없는 사용자 정의 요소 이전에 이 문제에 대한 티켓을 한 장 올렸으며, 같은 시도를 했지만 운이 따르지 않았다.이 오류에 대해 좀 더 알고 있는 사람이 있을까? FinalCountdown.html Hello App! Go to Foo Go to Bar FinalCountdown.spec.js import Vue from 'vue' import router from '../../router' import FinalCountdown from 'src/components/workflow/FinalCountdown' describe('workf..

하위 구성 요소를 기반으로 계산된 속성 하위 구성 요소 데이터에 의존하는 계산된 속성을 만들 수 있는가?사소한 일 같지만 알아낼 수가 없어... foo 성분 {{ foo }} 상위 구성 요소 foo computed property sum: {{ sum }} export default { computed: { sum() { // return...? } } } 할 수 있지만, 그것은 사물에 대한 꽤 특이한 접근 방법이기 때문에, 그것은 여러분이 성취하려고 하는 어떤 것을 위한 최선의 선택은 아닐 것이다. 대신 데이터를 부모에 보관하여 구성 요소에 전달하십시오.사용한다면value소품명으로서, 당신은 몇 가지 좋은 깨끗한 구문을 얻을 수 있다.v-model. (사용해야 한다.foos[index]가명을 사용할 수..

VueJ를 사용하여 테이블에서 행 제거s Vue에서 항목이 삭제될 때 테이블에서 행을 제거하는 방법 아래는 내가 테이블을 렌더링하는 방법이다. Delete 아래는 나의 Vue 구성 요소에서 발췌한 것이다. data() { return { items: [] } }, methods: { fireDelete(id) { axios.delete('/item/'+id).then(); } }, mounted() { axios.get('/item').then(response => this.items = response.data); } axios.get work and the acios.delete도 작동하지만, 앞쪽이 반응하지 않기 때문에 한 페이지 새로 고친 후에만 테이블에서 항목이 제거된다.관련 항목을 제거하려면 ..

소품으로 전달된 배열에서 객체를 어떻게 반응적으로 제거하여 DOM에 반영할 수 있는가? 다음 블레이드 파일이 있다. @extends('layouts.app') @section('content') @endsection 어디에$items컨트롤러에서 꺼낸 물체의 JSON 배열이다.자, 더items구성 요소는 다음과 같다. 그computedItems특성: computed: { computedItems() { // referring to the prop that is passed from the blade file let items = this.items; if (this.filterOptions.type !== 'Clear') { items = items.filter(i => i.status === this.f..