c10106

정적 자산을 nuxt 생성과 함께 동적으로 포함하는 방법 Nuxt.js를 사용하여 정적 사이트에서 작업 중(I target to publish only result official)nuxt generate). 콘텐츠는 json API를 호출하여 생성된다. 파일 몇 개를 가져다가 마치 그 안에 있는 것처럼 포함시키고 싶다./static디렉토리(API 응답에 따라 다름).어떻게 그것이 달성될 수 있었을까? 문제를 더 잘 설명하려면:API에서 오는 송장 목록이 있어서 결과 페이지에는 송장 정보를 보여주지만, 해당 파일에 대한 다운로드 링크(API 응답을 알고 나서 해결할 수 있는 링크)도 포함시키고 싶다고 하자. 이 작업은 사이트 생성 후 nuxt.js를 제외하고 수행되어야 하는가?static폴더는 그렇게 의..

경로 문자열을 개체 값과 결합하는 Vue JS v-bind 이미지 src 특성이 작동하지 않음 여기 뭔가 간단한 게 없는 게 분명해.템플릿 안에서 나는 단지 객체에서 소싱된 이미지 파일 이름에 경로를 추가하려고 한다.나는 여러 가지 시도를 해봤는데, 등 진드기 등등이 시큰둥한데, 부에는 그 중 어느 것도 마음에 들지 않는다.이 형식을 올바르게 지정하려면 어떻게 해야 하는가? playerDetail.pic = "player_image.png" 그것은 이렇게 하세요. img class="img-fluid" v-bind:src="'assets/img/' + playerDetail.pic" alt=""> Vue는 HTML 속성에 콧수염 구문 사용을 지원하지 않는다.참조 img class="img-fluid" :..

한 항목에 일부 변경 사항이 있을 때 vuex 어레이의 상태를 업데이트하는 중 내 vuex 상점에 cases라는 배열이 있어. 어레이의 기존 항목 내에서 몇 개의 필드를 업데이트할 때 어레이를 새 컨텐츠로 업데이트하려고 함. 내 돌연변이에 이런 짓을 할 수 있을 줄 알았는데 효과가 없어 실수를 해버렸어.typeError: undefined is not an object (evaluating 'state.objects.find')— EDIT_CASE (state, payload) { const item = state.objects.find(item => item.id === payload.recordId); Object.assign(item, payload.case_status); 내 배열은 다음과 같다...

Vue.js 2의 슬롯에 클래스 바인딩 항목을 반복하고 필터링하며 슬롯에 클래스를 추가하는 재사용 가능한 구성 요소를 만들려고 한다(품목이 짝수, 홀수, 첫 번째, 마지막 등). 재사용 가능한 구성 요소: 그리고 내가 그것을 사용하는 방법은 다음과 같다. 모든 것이 예상대로 작동하지만, 안에 넣는 요소에 클래스를 추가하지는 않는다. 내가 뭐 잘못하고 있는 거야?Vue.js 2에서 이런 일을 하는 것이 기술적으로 가능한가? 어떤 도움이나 제안이라도 고마워!와 함께vuejs2다음과 같이 슬롯에서 스타일링이 제거됨: 이름을 통해 삽입된 콘텐츠는 더 이상 슬롯 속성을 보존하지 않는다.래퍼 요소를 사용하여 스타일을 지정하거나 고급 사용 사례의 경우 렌더 함수를 사용하여 삽입된 내용을 프로그래밍 방식으로 수정하십시..

동적 열이 있는 요소 UI 테이블 모든 열을 하드 코딩할 필요 없이 요소 UI 테이블 구성요소를 사용하는 예를 찾고 있다.공식 요소 UI 표 문서를 포함하여 내가 본 모든 예제는 템플릿에 지정된 모든 열을 보여준다. 이런 일을 하려고 한다.내 예전 테이블 구성 요소에서, 이것은 나에게 모든 열과 내 여분의 끝 열을 준다.delete단추를 채우다 Delete 대조적으로 요소 UI 표 예제는 모두 여러 번 반복된 것을 사용한다.el-table-column태그. 런타임에 서로 다른 열이 있는 데이터를 로드하기 때문에 이 방법을 사용할 수 없다. 나는 초보자라서 엘테이블을 가지고 내 목표를 달성하는 방법을 이해하려고 애쓴다.열을 필요한 속성이 있는 개체 배열로 만들 수 있으며 이 열을 템플릿에서 반복하여v-fo..

Algolia InstantSearch Vue 구성 요소를 Vuetify 데이터 테이블에 통합 Vuetify 데이터 테이블과 Algolia InstantSearch Vue Component가 포함된 Vue JS 애플리케이션을 만들고 있다.그러나 현재 데이터 테이블과 InstantSearch 인덱스는 서로 다른 데이터 소스를 사용하고 있다. 알골리아 지수의 검색 결과를 뷔에티파이 데이터 테이블로 어떻게 통합해야 할까? Food Categories List Delete Selected @{{ result.title }} @{{ result.slug }} arrow_upward @{{ header.text }} @{{ props.item.id }} @{{ props.item.title }} @{{ props...

vuex를 이용한 vue 2 JS에서의 Axios 요격 로그인 호출 성공 후 다음과 같이 vuex 저장소에 토큰을 저장한다. axios.post('/api/auth/doLogin.php', params, axiosConfig) .then(res => { console.log(res.data); // token this.$store.commit('login', res.data); }) axiosConfig는 기본만 설정하는 파일이다.URLexport default { baseURL: 'http://localhost/obiezaca/v2' }그리고 매개 변수는 백엔드로 전송되는 데이터일 뿐이다. 내 vuex 파일 모양: import Vue from 'vue'; import Vuex from 'vuex'; V..

Vuex + VueJS: 계산된 속성을 하위 항목에 전달하는 것은 정의되지 않음 Vue 구성 요소에 대한 이 설명서를 읽고 있지만 구성 요소 속성에 Vuex 데이터를 사용하고 있다. 이 예에서 다음과 같이 한다.country_id에 있다data그것이 잘 작동하는 방법.하지만 언제country_id하위 구성 요소의 Vuex 저장소에서 데이터를 반환하는 계산된 속성internalValue항상 다음과 같이 초기화됨undefined. 내가 뭘 잘못하고 있는 거지? 상위 구성 요소: export default { computed: { country_id() { return this.$store.state.user.country_id } }, mounted: function () { this.$store.dispa..

동일한 페이지에 여러 번 표시된 Vuejs 구성 요소를 동기화할 수 있는가? 나는 항목을 표시하는 웹 페이지를 가지고 있다.각 항목에 대해 버튼(vuejs 구성 요소)이 있어 사용자가 이 항목을 자신의 컬렉션에 추가/제거할 수 있다. 구성 요소는 다음과 같다. {{ dText }} 각 항목에 대해 사용자는 다음 링크를 클릭해 로드한 모달도 열 수 있다. 모달은 또한 Vuejs 구성 요소: {{ pop.name }} Collection: {{ pop.collection ? pop.collection.name : '' }} 여기 내 app.js 스크립트: window.Vue = require('vue'); Vue.component('pop-modal', require('./components/PopModal..

TDD 중 Vue 인스턴스의 조롱 방법 나는 Vue 앱을 만들면서 TDD를 배우고 있고, 실패하는 단위 테스트를 만족시키기 위해 생산 코드만 쓸 수 있는 엄격한 법을 준수하려고 노력 중이다.나는 이 접근법을 정말 즐기고 있지만, 나는 Vue 인스턴스에 방법을 추가하고, 템플릿의 요소에서 이벤트가 발생할 때 그것들이 호출되었다는 것을 테스트하는 것과 관련하여 장애물에 부딪쳤다. 대리 방법을 조롱하면 결국 부르지 않게 된다는 점에서 부에 방법을 어떻게 조롱할 수 있을지에 대한 어떤 제안도 찾을 수 없다(제스트와 부에스트 테스트 유틸리티를 사용하고 있다). 나도 사이프러스를 사용하고 있어서 이 시험은 e2e로 채울 수 있지만 단위 시험으로 가능한 한 많이 채울 수 있었으면 좋겠어. 나는 Edd Yerburg의..