prostudy

Vue.js - 마지막 항목 손실 시 요소-ui el-table v-for 제목 목록으로 그룹화 테이블 헤드를 생성하려고 하는데, v-for 루프가 마지막 항목 하나를 잃어버렸어. html 템플릿 코드: JavaScript 코드: new Vue({ el: "#app", data() { return { titles: [ "title 1", { "title 2": ["title 2-1", "title 2-2"] }, "title 3", "title 4" ] }; } }); 렌더 결과는 다음과 같다. 내 문제는 마지막 항목인 "제4 제목"이 표시되지 않고 빈칸만 남았다는 거야, 누군가 나를 도와줄 수 있기를 바라. 원소-의 테이블 문서, 데모 코드가 여기에 있다.몇 가지 디버깅을 한 후 나는 다음과 같은 것을..

Vue.js에서 동적으로 데이터 바인딩된 텍스트 내 케이스는 이상하겠지만, 난 좋은 점이 있어.여기 내 상황이 있다. 나는 json을 기반으로 양식을 렌더링하는 Vue 앱을 가지고 있다.예를 들어, JSON: { "fields": [{ "name": "firstName", "title": "Name" }, { "name": "lastName", "title": "Last Name" }, { "title": "Hello {{ firstName }}!" }] } 이 json에서 최종 렌더링은 다음과 같아야 한다. Hello {{ firstName }} 나는 그 모든 것을 렌더링할 수 있다. 단, 그 모든 것을.생으로 렌더링되는{{ firstName }}데이터 바인딩/비록이 아님. 제 질문은:구성 요소에 동적..

Laravel에서 파일 app.js에 Vue 구성 요소를 추가하는 방법? 애러벨과 vue를 사용하는 튜토리얼을 보고 있었는데, 튜토리얼에서 그는 구성 요소 폴더에 vue 구성 요소를 추가한 다음 그 구성 요소를 에 등록했다.app.js이 코드를 사용하여 철하다. Vue.component('articles',require('./components/articles.vue'); 그리고 그것은 잘 작동하고 내가 이 코드를 사용할 때 내 경우는 이렇게 되어 있다.require is not defined. 에서.app.js파일:이 코드를 사용하여 이미 등록된 구성 요소 예제 Vue.component('example-component',__webpack_require__(37)); 내 질문은 어떻게 그 숫자가37정의..

유닛 테스트에서 jest와 함께 부트스트랩 vue 구성 요소의 존재 여부를 테스트하는 방법? 그래서 나는 몇개의 코드를 가지고 있다.b-form-input구성 요소와 나는 그 구성 요소가 렌더링되는지 테스트하고 있다.나는 사용하고 있다wrapper.find({name: "b-form-input"}).exists()부트스트랩 vue 구성 요소가 있는지 여부를 확인하십시오.그러나 이 기능은 구성 요소가 렌더링되고 있다는 것을 알게 되면 계속 거짓을 반환한다.어떻게 해야 제대로 할 수 있을까? 그 모습을 보면서bootstrap-vue소스 코드, 요소의 이름이BFormInput, 그리고 그렇지 않다.b-form-input(kebab-case를 사용하여 등록됨): https://github.com/bootstra..

Vue 구성 요소에서 사용자 정의 Getter 정의 내 질문은 Vue와 좀 더 구체적으로 반응성 및 반응성 게터/세터: https://vuejs.org/v2/guide/reactivity.html Vue 구성 요소에서 나만의 게이터를 정의할 수 있으며 Vue가 자체 반응 게터를 추가하면 어떻게 될까? Vue는 모든 속성을 거치고 Object.defineProperty를 사용하여 getter/setter로 변환한다. 위의 문장이 의미하는 것은 당신의 각 재산에 대해 반복하는 것이다.data반응하게 만드는 옵션. 예를 들어 다음을 고려하십시오.data옵션: data:{ foo: 'hello world', bar: 3 } vue는 그 이상이다.data다음과 같은 객체(추상적 설명에 불과하다): let key ..

Vue js 자식 구성 요소에서 정의되지 않은 소품.하지만 그 대본에서만 나는 이제 막 Vue를 사용하기 시작했고 예상치 못한 행동을 경험했다.부모 구성 요소에서 자식 구성 요소로 소품을 전달하는 것에 대해 나는 아이의 템플릿에 있는 소품에는 접근할 수 있었지만, 아이의 대본에는 접근할 수 없었다.그러나 부모 템플릿(마스터 div)의 v-if 지시어를 사용했을 때 자식 스크립트와 자식 템플릿의 소품 모두에 액세스할 수 있었다.여기에 설명을 해주시면 감사하겠는데, 이 코드를 더 잘 만들 수 있는 방법이 없을까?아래 코드를 참조하십시오.고마워요. 상위 구성 요소: {{ message.body }} 하위 구성 요소 {{ message.id }} // works in both cases {{ answer.bod..

Vue.Js 2 입력 형식 번호 나는 vuejs2를 사용하여 숫자 포맷을 위한 숫자 입력을 얻기 위해 고군분투해왔다. 일부 뷰 논리를 asp.net core 2에서 vue로 마이그레이션하는 중. 입력 변경에 대한 관점을 다시 로드해야 했어 숫자 입력을 미국 형식과 소수점 2자리(100만.21)로 포맷하되 모델 값이 0이거나 비어 있을 때는 아무것도 표시하지 않는 방법이 필요하다. vue-numeric은 거의 모든 것을 하지만 내가 자리 표시자를 사용하려고 할 때 나는 실패한다. 빈 문자열을 사용하면 충돌하기 때문에 자리 표시자 공간을 사용해 보았다.0 또는 빈 값이 입력된 경우 이 예는 0.00을 표시한다.나는 출력 타입과 빈 값 소품들을 가지고 놀려보았다. 나는 부랑자와 결혼하지는 않았지만 더 편리한 ..

Vue.js, 어레이 항목 순서를 변경하고 DOM에서도 변경하십시오. Vue 인스턴스에는 4개의 값을 포함하는 "블록" 이름의 어레이가 있다.v-for를 사용하여 이 어레이를 DOM에 렌더링하는 경우: {{ number }} 이렇게 하면 내부에 4개의 스팬이 있는 div가 생성되며, 각각 "index--0", "index-1" 등의 클래스가 있다. 이 옵션을 클릭하면 배열 변경 순서: shuffleArray: function() { const shifted = this.block.shift(); this.block.push( shifted ); } 값이 바뀌어도 실제 DOM에서는 움직이지 않는데, 클릭했을 때 어떻게 하면 DOM에서 스팬이 실제로 자리를 바꿀 수 있을까?각 스팬에는 스타일이 적용되므로 값..

고스트 블로그에서 API를 사용하여 Vue cli 프로젝트에서 게시물을 가져오는 방법 Vue cli 프로젝트에 API를 사용하여 모든 게시물을 고스트 블로그에 표시하려고 한다. 이 페이지의 예는 nuxt 프로젝트에 관한 것이다. 종속성을 호출하고 블로그를 인증한 후 다음 게시물을 얻을 수 있는 기능을 만들면 된다. export async function getPosts() { return await api.posts .browse({ limit: "all" }) .catch(err => { console.error(err); }); } 그런 다음 vue 페이지에서 다음을 수행하십시오. {{ post.title }} Nuxt에서는, 이것은 그냥 효과가 있다.노드에서, 그것은 또한 작동한다. 기능에 전화해서..

하위 구성 요소(행)를 제거하는 예기치 않은 동작 설명: 몇 가지 제품이 있는 테이블이 있는데 각 행은 사용자 지정 vue입니다.구성 요소 각 요소에는 사용자 정의 "제거" 이벤트를 트리거하는 닫기(제거) 버튼이 있다.기본 앱이 이 이벤트를 듣고 하위 항목(인덱스별)을 제거함 일부 정적 텍스트의 한 부분 행에 숫자가 포함된 입력이 들어 있는 경우. 문제: 상위(Vue app)는 행을 제거하지만, 입력 값이 다음 행의 입력으로 이동(그리고 이전 값을 대체)된다. 예상 동작: 일단 텍스트 입력 값이 제거되면 상관없는 항목을 간단히 제거하고 싶다.그것은 그 가치를 다음 형제자매로 옮겨서는 안 된다. 예를 첨부한다. let row = Vue.component('row', { name: 'row', props: ..