반응형

vuejs2 417

Vue.js: 구성 요소가 초기화될 때 감시기 기능을 작동시키는 방법

Vue.js: 구성 요소가 초기화될 때 감시기 기능을 작동시키는 방법 때때로 나는 데이터 속성의 변화에 대응하여 몇 가지 기능을 호출할 필요가 있다.하지만 데이터 속성의 초기 가치를 위해 발사할 수 있는 기능도 필요하다. 기술적으로 관찰되고 있는 부동산이 아직 바뀌지 않았기 때문에 부품이 초기화될 때 감시자는 발포하지 않는다.그래서 결국 그 기능을 그 안에 넣게 된다.methods목적어, 그리고 감시자와 그 방법을 부르는 것.mounted갈고리를 걸다 예를 들면 다음과 같다. new Vue({ el: '#app', data() { return { selectedIndex: 0, } }, methods: { focusSelected() { this.$refs.input[this.selectedIndex]...

programing 2022.05.01

TypeScript가 Vue 플러그인에 대한 모듈 확장을 인식하지 못하는 이유

TypeScript가 Vue 플러그인에 대한 모듈 확장을 인식하지 못하는 이유 나는 Vue와 TypeScript를 배우기 위해 만들고 있는 Vue 프로젝트가 있다.이 프로젝트에는 Vue 플러그인으로 구성 요소에 사용할 수 있도록 선택한 정적 데이터 덩어리가 있으며 Vue 프로토타입에 속성을 추가하십시오. import _Vue from 'vue'; export default function myPlugin(Vue: typeof _Vue): void { Vue.prototype.$myPlugin = { one: 1, two: 2 }; } 나는 피터 쿤이 올린 글에서 부동산 유형을 정의하면서 그 충고를 따랐다.test-plugin.d.ts파일 import Vue from 'vue'; declare module..

programing 2022.05.01

구성 요소를 게으르게 로드할 때 얕은 마운트가 마운트처럼 작동함

구성 요소를 게으르게 로드할 때 얕은 마운트가 마운트처럼 작동함 나는 Nuxt 앱을 테스트하고 있다.vue-test-utils(버전 1.0.0-베타.29) 그리고 나는 로딩을 게을리 한다.child구성 요소테스트할 때shallowMount그parent스텁 구성 요소childs (나는 그것을 렌더링하고 싶지 않다.child종속성 때문에 구성 요소). 만드는 대신child스텁, 전체 구성 요소 트리가 에서 렌더링됨shallowMount.부품을 게으르게 적재하지 않고 적재할 경우,shallowMount예상대로 되다 이 문제는 이미 여기서 직면하고 해결된 것 같다: https://github.com/vuejs/vue-test-utils/issues/959 나는 통과하려고 노력했다.{ shouldProxy: tr..

programing 2022.04.29

v-if 및 v-properties inside(다른 텍스트 렌더링용)

v-if 및 v-properties inside(다른 텍스트 렌더링용) v-for 내부에서 텍스트를 렌더링하기 위한 다른 옵션을 선택할 수 있는 방법을 찾을 수 없어.아래 코드 같은 걸 하려면 논리를 다르게 구성해야 하나? // if notification.type = 'friend request' New friend request from {{ notification.name }} // else New notification from {{ notification.name }} 알림은 이름 및 알림 유형과 같은 데이터를 가진 개체의 배열입니다.다른 항목 사용template다음과 같은 요소(테스트되지 않음) New friend request from {{ notification.name }} New not..

programing 2022.04.29

탐색복제 현재 위치("/검색")로 이동할 수 없음

탐색복제 현재 위치("/검색")로 이동할 수 없음 여러 번 검색하고 싶을 때는NavigationDuplicated오류. 검색은 탐색 모음에서 수행되며 검색을 구성한 방법은 모델을 사용하여 값을 가져온 다음 해당 값을 ContentSearched 구성 요소에 매개 변수로 전달하고 그 구성 요소에서 검색 값을 수신하는 것이다. 나는 방출기를 사용하는 것이 올바른 방법이라는 것을 알지만, 나는 그것을 사용하는 방법을 아직도 모른다.방출에 접근하는 것은context.emit('', someValue) NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "Navigating to current loca..

programing 2022.04.29

필터링/검색 문제 후 입력 변경 - VueJs

필터링/검색 문제 후 입력 변경 - VueJs 나는 VueJS의 신입이고 이 기능을 다룰 충분한 경험이 없다. 그래서 나는 질문을 만들어낸다(그 질문은 중복될 수 있다). 예를 들어 나는 사용했다.computed주 필터/검색 기능을 처리하다 computed: { filteredProducts: function () { return this.products.filter(product => product.name.includes(this.filter.name)); } } 다음 단계에서는 다음과 같은 제품 목록을 렌더링한다.v-for지시, 사용filteredProducts 다른 텍스트 상자도 있는데, 사용자가 제품 이름으로 검색하기 위해 입력할 수 있다. 검색 입력에 입력함으로써 제품 목록이 적절하게 갱신되고..

programing 2022.04.29

Vuetify의 팹 버튼 아이콘이 수직으로 중앙에 위치하지 않음

Vuetify의 팹 버튼 아이콘이 수직으로 중앙에 위치하지 않음 뷔에티비의 팹 버튼이 수직으로 중앙에 위치하도록 할 수 없다. 여기 나의 용법이 있는데, 평범하지 않은 특별한 점을 지적한다. print 여기 main.js 파일이 있다. import Vue from "vue"; import Vuetify from "vuetify"; import "vuetify/dist/vuetify.min.css"; import "material-design-icons/iconfont/material-icons.css"; import "typeface-roboto/index.css"; Vue.use(Vuetify); new Vue({ router, store, render: h => h(App) }).$mount("#ap..

programing 2022.04.29

데이터 테이블(v-data-table) Vuetify Data Table - 특정 열의 값을 조건부로 스타일 지정하는 방법

데이터 테이블(v-data-table) Vuetify Data Table - 특정 열의 값을 조건부로 스타일 지정하는 방법 Vuetify Data Table(v-data-table 구성 요소)의 열에서 특정 값을 가장 쉽게 강조 표시하는 방법 예: 여기 첫 번째 예에서 다음과 같이 합시다: https://vuetifyjs.com/en/components/data-tables. 300보다 큰 Calculars 컬럼의 값을 볼드 및 빨간색 스타일로 자동 스타일링하는 방법너는 그런 일을 할 수 있다. {{ item.calories }} 그런 다음 스크립트에서 값을 자동으로 스타일링하는 메서드 "getStyle"을 추가할 수 있다. methods: { getStyle (calories) { if (calorie..

programing 2022.04.28

재귀 구성요소 및 재귀 중첩의 Vue 끌어서 놓기

재귀 구성요소 및 재귀 중첩의 Vue 끌어서 놓기 나는 Vue와 함께 재귀 트리 구성요소를 만들기 위해 일하고 있다. 현재 나는 체크박스에 대한 지원을 추가하고 노드를 확장하고 있지만, 재귀 구성요소에 드래그 앤 드롭을 구축하는 데 약간의 문제가 있다. 이 샘플로 드래그 앤 드롭을 구현할 방법이 있는가? 코드 및 상자 링크 끌리는 노드를 얻을 수 있지만 드롭다운에서 대상 노드를 얻을 수 없는 경우?끌기 중지 시 끌린 노드만 표시됨 수신기를 다른 위치에 추가해야 하는가? 여기선 노드만 끌리는데? handleDragEnd() { this.$el.classList.remove('cmp-drag-node'); }, 참고: VueDraggable Im이 간단한 jsfiddle이나 문제에 대한 몇 가지 설명을 찾는..

programing 2022.04.28
반응형