반응형

vuejs2 87

vueJ2에 페이지 수가 있지만 렌더링하지 못한 요소-ui 테이블의 행에 대한 배경색

vueJ2에 페이지 수가 있지만 렌더링하지 못한 요소-ui 테이블의 행에 대한 배경색 표의 결과 열에 따라 false의 경우 빨간색 배경 색상을 추가하고 true의 경우 녹색 배경을 추가해야 합니다. 요소를 사용하고 있습니다.UI + 데이터 테이블의 페이지 번호 + vuej.미리 결과 컬럼에 스타일 바인딩을 사용하여 컬럼 선언을 추가하려고 합니다. 마이템플릿코드 {{ table.row.launch_success }} my custom Row Backgrond() 함수 customRowBackgrond({row}){ if (row.launch_success == true) { return {'backgrondColor': 'rgb(252, 230, 190)'}; } else if (row.launch_su..

itsource 2022.08.31

NuxtJs 응용 프로그램에서 Vue.set()을 사용하는 방법

NuxtJs 응용 프로그램에서 Vue.set()을 사용하는 방법 Nuxtjs 어플리케이션에서 Vue.set()을 사용하여 속성을 설정합니다. editPost(post) { Vue.$set(post, 'edit', true) } 에러가 발생했습니다.Vue가 정의되지 않았습니다.그냥 사용하시면 됩니다.this대신Vue.이것은 메서드 내의 현재 vue 컴포넌트를 참조하기 때문에 다음과 같이 동작합니다. editPost(post) { this.$set(post, 'edit', true) } 경우에 따라서는 Object.assign() 또는 _.extend()를 사용하여 기존 개체에 여러 속성을 할당할 수도 있습니다.그러나 개체에 추가된 새 속성은 변경을 트리거하지 않습니다.이 경우 원래 개체와 mixin 개체 ..

itsource 2022.08.31

Nuxt.js에서 현재 경로 이름을 얻는 방법

Nuxt.js에서 현재 경로 이름을 얻는 방법 정적 웹사이트를 구축하기 위해 Nuxt.js를 사용하고 있습니다. 컴포넌트에서 접속하는 방법script현재 표시된 코드 루트 이름(브라우저 위치에서 직접 URL을 읽지 않도록 합니다) 어떻게 해서든 접속할 수 있을까요?$route.name?네, 다음과 같은 vuejs 루트 객체를 사용할 수 있습니다.$route.name또는$route.path $nuxt.$route.path 리턴 전류 경로 $nuxt.$route.name 현재 루트의 이름(있는 경우). 루트 오브젝트 속성 루트 오브젝트는 현재 액티브루트의 상태를 나타냅니다.여기에는 현재 URL 및 해당 URL과 일치하는 루트레코드의 해석 정보가 포함됩니다. $route.path type: 문자열 현재 루트의..

itsource 2022.08.30

Vue 2의 클라이언트 측 검색 결과에서 aria-live 영역의 변경 내용을 제대로 읽지 않음

Vue 2의 클라이언트 측 검색 결과에서 aria-live 영역의 변경 내용을 제대로 읽지 않음 아이템 리스트에서 간단한 클라이언트 측 텍스트 검색을 작성하고 있으며, 스크린 리더가 아이템의 수를 읽도록 하고 있습니다.예를 들어, 검색에서 두 개의 항목이 반환되면 스크린 리더가 "Two results found" (두 개의 결과가 검색되었습니다)라고 알립니다.이를 테스트하기 위해 VoiceOver를 사용하고 있습니다. 제가 직면한 문제는 이 메시지의 알림이 거의 항상 스크린리더에 의해 중단되어 사용자가 입력 중인 텍스트를 읽고 있기 때문에 (일부적으로) 메시지를 놓치게 된다는 것입니다. 다음은 아리아 라이브 영역의 마크업입니다. Found 1 result Found {{ filteredItems.leng..

itsource 2022.08.30

mathjax + vue 재렌더링 방정식

mathjax + vue 재렌더링 방정식 vue 어플리케이션을 만들고 있는데 MathJax를 사용하여 방정식을 렌더링하고 싶습니다.컴포넌트가 마운트되었을 때 렌더링할 방정식을 가져올 수 있지만 나중에 렌더링할 방정식을 가져올 수 없습니다. 이것을 증명하기 위해서 코드 샌드박스의 예를 만들었습니다.입력에서 라텍스 방정식을 변경하려고 합니다.콘솔에 워처가 실행 중이라고 표시되어도 변경되지 않습니다. 제가 뭘 잘못하고 있는지 누가 좀 설명해 주시겠어요? 다음 구성으로 cdn 경유로 mathjax를 index.html 선두에 추가했습니다. 여기 내 앱 컴포넌트의 코드가 있습니다. {{latex}} 나는 2가지를 더해서 그것을 가능하게 할 수 있다. https://codesandbox.io/s/x2mlq38m4z..

itsource 2022.08.30

목록의 초기 렌더링에 있는 목록 항목(스태거)에 애니메이션을 적용합니다.

목록의 초기 렌더링에 있는 목록 항목(스태거)에 애니메이션을 적용합니다. 메뉴/내비게이션이 표시되었을 때 포함된 목록 항목의 외관을 바꾸는 내비게이션을 제작하려고 합니다. 햄버거 기호가 있는데 클릭하면 네비게이션(전체 화면)이 렌더링됩니다.이제 서로 다른 목록 항목(실제 링크)이 서로 지연되어 나타나는 애니메이션을 만들고 싶습니다.첫 번째 목록 항목과 마지막 목록입니다. Vue의 걸로 할 수 있을 것 같아서목록 전환은 모두 목록 항목 추가 및 삭제에 관한 것이지만, 처음부터 모두 가지고 있습니다. 그 후, Vue.js: Straging List Transitions를 읽었습니다.이것만으로 충분하다고 생각했습니다.아쉽게도 나도 그것을 작동시킬 수고가 많았습니다. 제가 어떻게 그럴 수 있는지 힌트 좀 주시겠..

itsource 2022.08.30

입력 Vuej의 소수점 수 제한

입력 Vuej의 소수점 수 제한 입력 필드가 있으며 사용자가 입력해야 하는 소수점 수를 제한하고 싶습니다.예:(10.123), 더 입력하면 변경되지 않고 값이 그대로 유지됩니다.현재 사용자에게 오류가 발생하지만 충분하지 않습니다.PS. Vue-Bootstrap을 사용하고 있습니다.나는 이것을 시도하지만 소수점뿐만 아니라 전체 숫자를 제한한다. 보기만 해도 잘 작동합니다. {{parseFloat(contract).toFixed(2)}} 변수의 소수점을 제한하는 메서드를 호출할 수 있습니다.@input이벤트입니다. 예: function callMe(){ var vm = new Vue({ el : '#root', data : {contract : ''}, methods: { restrictDecimal () ..

itsource 2022.08.30

변수를 기반으로 이벤트를 프로그래밍 방식으로 추가하려면 어떻게 해야 합니까?

변수를 기반으로 이벤트를 프로그래밍 방식으로 추가하려면 어떻게 해야 합니까? 이벤트를 프로그래밍 방식으로 추가하려고 합니다.@click다른 변수에 따라 달라집니다.레퍼런스를 사용해서 이런 걸 할 순 없어요this.$refs.example.addEventListner("click", someFunction)왜냐하면 나는 그것을 하고 있기 때문이다.v-for 저는 이런 걸 해봤어요@click="clickable ? clicked : null"하지만 기능은 제한되지 않습니다.clickable맞다 https://codesandbox.io/s/m941978v9x추가 중()실행할 수 있습니다. @click="clickable ? clicked() : null" https://codesandbox.io/s/p9l4o..

itsource 2022.08.29

다른 포트에서 제공되는 Vue 앱과 함께 로컬 API를 사용하는 방법

다른 포트에서 제공되는 Vue 앱과 함께 로컬 API를 사용하는 방법 Django + Vue 앱의 셋업 및 실행을 돕고 있는데, Vue 앱을 핫 새로고침하면서 로컬 Django 서버와 대화하는 방법이 있습니다. 프로덕션에서는 Django 서버가 Vue 앱을 제공하고,npm run buildVue 앱의 자산을 Django 프로젝트의 자산으로 이동합니다.templates/그리고.static/폴더. Django 서버를 실행할 때(python manage.py runserver), 서버가 동작하고 있습니다.localhost:8000달리기를 할 때npm run serve(핫 새로고침의 이점을 얻기 위해) Vue 앱은 다음 위치에서 제공됩니다.localhost:8080Vue 앱에서 GET 요청을 하면/example..

itsource 2022.08.29

Vue js에서 추적 기준 또는 v-for의 키는 어떤 용도로 사용됩니까?

Vue js에서 추적 기준 또는 v-for의 키는 어떤 용도로 사용됩니까? javascript와 javascript-frameworks는 처음입니다.의 실용성은 무엇입니까?track-by또는key에v-forVue JS에서? 나는 설명서를 읽었지만 그 용도를 잘 이해하지 못했다.일반적으로는 다음을 사용하는 것이 좋습니다.key사용할 때마다v-for그 주된 이유는 Vue가 성능상의 이유로 스마트하게 기존 컴포넌트를 재사용하려고 하기 때문입니다.이로 인해 컴포넌트가 내부 상태를 가지고 있기 때문에 특히 컴포넌트에 문제가 발생할 수 있습니다.컴포넌트가 속성 변경에 주의를 기울이지 않으면 이전 내부 상태로 렌더링되고 표시된 정보가 올바르게 업데이트되지 않은 것처럼 나타납니다. 여기 제가 몇 주 전에 대답한 질문의..

itsource 2022.08.29
반응형