prostudy

v-for를 사용하여 반복할 때 vuej가 크래시됨 다음과 같은 대상이 있습니다. const iterable = { items: [1,2,3,4], currentIndex: 0, [Symbol.iterator]() { const self = this; return { next() { return { done: self.currentIndex === self.items.length, value: self.items[self.currentIndex++] } } } } } 루핑할 수 있다for of: for(let i of iterable){ console.log(i) } 이제 v-for를 사용하여 반복해야 합니다. {{item}} 그러나 Vuejs는 크래쉬하고 무한 루프 상태가 되는 것처럼 보입니다.브라우저..

Vue.js 2에서 라우터 인스턴스를 내보내는 방법 앱에 라우팅 시스템을 구현하기 위해 라우터 인스턴스를 만들고 있습니다.그래서 이렇게 하고 있습니다. import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Home', component: Home }, ] }) 하지만, 저는 또한.beforeEach()라우터의 인스턴스에 접속합니다.어떻게 하면 좋을까요? 방법은 다음과 같습니다. router.beforeEach((to, from, next) => { // ... }); 근데 제 경우에는 안 맞나 봐요?어떻게 하면 좋을까요?해결: im..

Vuejs를 사용하여 여러 선택 옵션(드롭다운)에서 목록을 필터링하는 방법 여러 드롭다운에서 선택한 항목에 따라 개체 목록을 필터링하는 필터 함수를 찾아야 합니다.드롭다운에서 아무것도 선택되지 않은 경우 이러한 값 중 하나에 따라 필터링되지 않습니다. 나는 mock structure를 배치하는 fielen을 설정했지만, 드롭다운에서 옵션을 선택했을 때 실시간으로 목록을 필터링하기 위해 javascript 함수를 쓰는 데 도움이 필요하다. 다음은 구조 예를 제시하겠습니다.https://jsfiddle.net/5k4ptmqg/751/ Type 1 Type 2 Size 1 Size 2 {{ item.name }} {{ item.type }} {{ item.size }} new Vue({ el: '#app', ..

UI 프레임워크의 '개별 구성 요소 가져오기' 실행으로 Vue js 앱의 성능이 향상됩니까? UI 프레임워크(Bootstrap-Vue, Element 등)를 사용하는 경우Vuejs 어플리케이션의 UI 또는 Vuetify 등)에서는 App.vue(또는 어플리케이션 엔트리 포인트)의 node_module에서 UI 프레임워크 컴포넌트 및 스타일시트 전체를 Import하거나 필요에 따라 특정 UI 컴포넌트를 Import할 수 있습니다. 이 두 가지 접근법의 시연은 다음과 같습니다. scenerio 1의 경우 App.vue에서 import BootstrapVue from 'bootstrap-vue' scenerio 2의 경우 특정 .vue 파일에서 import {BContainer} from 'bootstrap-..

Vue.js에서 Enter 키를 누르면 텍스트 출력에 태그 붙이기 앱에 기본적인 텍스트 에디터 기능을 추가해야 합니다. 사용자가 무언가를 입력하면 텍스트가 단락에 출력되는 텍스트 영역이 있습니다.스페이스 바를 듣고 해당 텍스트 영역에 키를 눌러 메서드를 트리거합니다. 텍스트 영역에서 Enter 키를 눌렀을 때 텍스트 출력에도 줄 바꿈이 생기도록 하고 싶지만, this.textBody.appendChild함수가 아니다 내가 하려는 건 이거야 new Vue({ el: "#app", data: { title: "", textBody: "" }, methods: { logSpacebar: function(){ console.log("spacebar pressed"); //Fire corrector API? },..

VueJS 및 Firebase, 새로 고침 시 기록 모드 404 오류 라우터 파일의 이력 모드를 사용하여 링크의 해시방을 삭제했습니다.페이지를 갱신하면, 404 에러가 표시됩니다. 나는 이 링크를 팔로우하려고 했다. 파이어베이스에 부품을 추가했습니다.json: { "hosting": { "public": "dist", "rewrites": [ { "source": "**", "destination": "/index.html" } ] } } 아무것도 변하지 않았어요. 왜 아직도 이 오류가 발생하는지 모르겠어요.여러 가지를 시도해 봤지만 고칠 수 있는 것을 찾을 수가 없어요. 라우터 파일은 다음과 같습니다. const router = new VueRouter({ mode: 'history', routes: ..

뷰 사이드 컴포넌트 내의 vue-good 테이블에 커스텀 콘텐츠를 표시하려면 어떻게 해야 합니까? 저는 VueJs에 처음 와서 jQuery를 사용하는 일반적인 Yajra 데이터 테이블 대신 Vue-good-table(여기서 doc: https://xaksis.github.io/vue-good-table/)이라는 라이브러리를 사용하여 데이터 테이블을 내 라라벨 프로젝트에 표시하기로 결정했습니다.백엔드에서 데이터를 표시할 수 있었지만 커스텀 "액션" 열에 편집 버튼을 포함시키는 데 어려움을 겪고 있습니다.나는 여러 가지 방법을 시도했지만 성공하지 못했다.버튼을 클릭하기만 하면 편집 페이지로 리다이렉트 할 수 있는 방법이 필요하기 때문에 내 php 뷰 파일에서 커스텀 컬럼 템플릿을 처리해야 할 것 같습니다.보..

비동기 메서드를 사용하여 .vue 파일에서 중단점을 설정할 수 없습니다. 스테핑이 행을 건너뛸 수 있거나 유효한 줄에 중단점을 설정할 수 없는 경우 Vue 앱을 디버깅하는 데 문제가 있습니다. 소스맵 문제인 것 같은데 어디서부터 파야 할지 모르겠어요.Vue-loader, Webpack 또는 Babel 중 하나일 수 있습니다. 테스트 대상: 버전: 2.6.10 vue-cli 4.1.2 이 문제는 다음과 같이 재현할 수 있습니다. 새 Vue 프로젝트 생성: vue 생성 테스트 기본값을 사용합니다. cd 테스트 npm 런 서브 HelloWorld.vue를 다음으로 바꿉니다. Save Chrome에서 devtools를 열고 저장 버튼을 누른 다음 회선에 중단점을 둡니다. if (valid) { 내 시험에서는 중..

라라벨 vue 프로젝트에 라라벨 혼합을 사용하면 모든 컴포넌트에 scs 파일을 포함시킬 수 있습니까? 기본적인 vue 어플리케이션에서만 동작할 수 있었지만, larvel vue로 이행하는 데 어려움을 겪고 있습니다.vue 어플리케이션의 vue.config.js에 추가한 scss 파일을 Import하는 모듈을 추가할 수 있었습니다.webpack.mix.js 파일의 laravel vue 앱과 동일한 코드를 사용하면 올바르게 컴파일되지 않습니다.이것은 내 webpack.mis.js 파일입니다. let mix = require('laravel-mix'); module.exports = { css: { loaderOptions: { sass: { data: `@import "./resources/assets/sa..

Laravel / Vue: v-model 사용 시 검증 중 Laravel과 Vue js를 사용하고 있는데 Laravel을 사용하여 이 필드를 검증하는 방법을 알 수 없습니다. Vue 컴포넌트: {{problem.title}} 그러면 어레이가 반환됩니다. array:2 [ "problems" => array:2 [ 0 => array:2 [ "id" => 33 "rating" => "12" ] 1 => array:2 [ "id" => 38 "rating" => "3" ] ] ] Laravels 검증을 사용하여 이를 검증하는 방법을 모르겠습니다.저는 이런 것들을 많이 해봤어요 $this->validate($request, [ 'rating' => 'required|integer', ]); 하지만 이것은 물론..