«vue-component» 태그된 질문

Component는 기본 HTML 요소를 확장하여 재사용 가능한 코드를 캡슐화 할 수있는 강력한 Vue 기능입니다.

9
Vue.js-중첩 된 데이터를 올바르게 감시하는 방법
소품 변형을 올바르게 감시하는 방법을 이해하려고합니다. ajax 호출에서 데이터를 수신하고 데이터를 객체 안에 넣고 v-for 지시문을 통해 일부 하위 구성 요소를 렌더링 단순화 아래에 렌더링하는 상위 구성 요소 (.vue 파일)가 있습니다. <template> <div> <player v-for="(item, key, index) in players" :item="item" :index="index" :key="key""> </player> </div> </template> ... 그런 다음 내부 <script>태그 …
13
'소품'변경 사항을 듣는 방법
에서 VueJs 2.0 문서 나 수신 대기하는 어떤 후크 찾을 수 없습니다 props변경. VueJ는 이와 onPropsUpdated()유사한 고리를 가지고 있습니까? 최신 정보 @wostex가 제안했듯이 watch내 재산을 시험해 보았지만 아무것도 바뀌지 않았습니다. 그런 다음 특별한 경우가 있음을 깨달았습니다. <template> <child :my-prop="myProp"></child> </template> <script> export default { props: ['myProp'] } </script> 나는 통과하고 …
7
Vue v-on : 클릭이 구성 요소에서 작동하지 않습니다
구성 요소 내에서 on click 지시문을 사용하려고하는데 작동하지 않는 것 같습니다. 구성 요소를 클릭해도 콘솔에서 '테스트 클릭'이 표시되면 아무 일도 일어나지 않습니다. 콘솔에 오류가 표시되지 않아서 내가 뭘 잘못하고 있는지 모르겠습니다. index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vuetest</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected …
13
자식 구성 요소의 vuejs 업데이트 부모 데이터
vuejs (2.0)로 게임을 시작합니다. 하나의 구성 요소가 포함 된 간단한 페이지를 작성했습니다. 이 페이지에는 데이터가있는 하나의 Vue 인스턴스가 있습니다. 해당 페이지에서 구성 요소를 html에 등록하고 추가했습니다. 구성 요소에는 하나가 input[type=text]있습니다. 그 값이 부모 (주 Vue 인스턴스)에 반영되기를 원합니다. 구성 요소의 상위 데이터를 올바르게 업데이트하려면 어떻게합니까? 부모로부터 바운드 소품을 전달하는 것은 …
12
VueJS 구성 요소에 외부 JS 스크립트를 추가하는 방법
지불 게이트웨이에 두 개의 외부 스크립트를 사용해야합니다. 지금은 둘 다 index.html파일에 저장됩니다. 그러나 처음에는 이러한 파일을로드하고 싶지 않습니다. 결제 게이트웨이는 사용자가 특정 구성 요소를 열 때에 만 필요합니다 ( using router-view). 어쨌든 이것을 달성 할 수 있습니까?
2
Vue 구성 요소 소품의 기본값 및 사용자가 소품을 설정하지 않았는지 확인하는 방법은 무엇입니까?
1. Vue 2에서 컴포넌트 소품의 기본값을 어떻게 설정합니까? 예를 들어, 다음과 같이 movies사용할 수 있는 간단한 구성 요소가 있습니다. <movies year="2016"><movies> Vue.component('movies', { props: ['year'], template: '#movies-template', ... } 그러나 사용자가 다음을 지정하지 않으면 year: <movies></movies> 그런 다음 구성 요소는 year소품에 대해 일부 기본값을 사용합니다 . 2. 또한 사용자가 소품을 …
5
Vue '내보내기 기본값'과 'New Vue'
방금 Vue를 설치하고 vue-cli 웹팩 템플릿을 사용하여 프로젝트를 만들기 위해 몇 가지 자습서를 따르고 있습니다. 구성 요소를 만들 때 다음과 같이 데이터를 바인딩합니다. export default { name: 'app', data: [] } 다른 자습서에서 데이터가 바인딩 된 것을 볼 수 있습니다. new Vue({ el: '#app', data: [] )} 차이점은 무엇이며 둘 …
6
VueJs 2.0의 형제 구성 요소 간 통신
개요 Vue.js 2.x에서에서 model.sync됩니다 되지 않습니다 . 그렇다면 Vue.js 2.x 에서 형제 구성 요소간에 통신하는 적절한 방법은 무엇 입니까? 배경 내가 Vue 2.x를 이해했듯이 형제 통신에 선호되는 방법 은 상점 또는 이벤트 버스를 사용하는 것 입니다. Evan (Vue의 제작자)에 따르면 : 또한 "구성 요소간에 데이터 전달"은 일반적으로 나쁜 생각이라고 언급 …
4
Vuex-계산 된 속성“name”이 할당되었지만 setter가 없습니다.
양식 유효성 검사가있는 구성 요소가 있습니다. 다단계 결제 양식입니다. 아래 코드는 첫 번째 단계입니다. 사용자가 텍스트를 입력했는지 확인하고 이름을 전역 상태로 저장 한 다음 다음 단계로 전송하고 싶습니다. vee-validate 및 vuex를 사용 하고 있습니다. <template> <div> <div class='field'> <label class='label' for='name'>Name</label> <div class="control has-icons-right"> <input name="name" v-model="name" v-validate="'required|alpha'" :class="{'input': true, …
4
VueJS의 동적 구성 요소에 동적으로 소품 전달
동적보기가 있습니다. <div id="myview"> <div :is="currentComponent"></div> </div> 연결된 Vue 인스턴스와 함께 : new Vue ({ data: function () { return { currentComponent: 'myComponent', } }, }).$mount('#myview'); 이를 통해 구성 요소를 동적으로 변경할 수 있습니다. 내 경우, 나는 세 가지 구성 요소가 있습니다 : myComponent, myComponent1,와 myComponent2. 그리고 나는 다음과 같이 …
6
속성 내부 보간을 해결하는 방법이 제거되었습니다. v-bind 또는 콜론 속기 사용? Vue.JS 2
내 vue 구성 요소는 다음과 같습니다. <template> <div> <div class="panel-group" v-for="item in list"> ... <div class="panel-body"> <a role="button" data-toggle="collapse" href="#purchase-{{ item.id }}" class="pull-right" aria-expanded="false" aria-controls="collapseOne"> Show </a> </div> <div id="purchase-{{ item.id }}" class="table-responsive panel-collapse collapse" role="tabpanel"> ... </div> </div> </div> </template> <script> export default { ... computed: { list: function() …
12
[Vue 경고] : 속성 또는 메서드가 인스턴스에 정의되어 있지 않지만 렌더링 중에 참조됩니다.
var MainTable = Vue.extend({ template: "<ul>" + "<li v-for='(set,index) in settings'>" + "{{index}}) " + "{{set.title}}" + "<button @click='changeSetting(index)'> Info </button>" + "</li>" + "</ul>", data: function() { return data; } }); Vue.component("main-table", MainTable); data.settingsSelected = {}; var app = new Vue({ el: "#settings", data: data, methods: { changeSetting: function(index) …
8
Vue 구성 요소에서 통화 형식을 어떻게 지정합니까?
내 Vue 구성 요소는 다음과 같습니다. <template> <div> <div class="panel-group"v-for="item in list"> <div class="col-md-8"> <small> Total: <b>{{ item.total }}</b> </small> </div> </div> </div> </template> <script> export default { ... computed: { list: function() { return this.$store.state.transaction.list }, ... } } </script> 결과 {{ item.total }}는 26000000 하지만 다음과 같이 포맷하고 …
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.