Polymer로 종이 구성 요소와 같은 WebComponents와 함께 Vue.js 사용

Question

웹 응용 프로그램 (SPA가 아닌 서버 렌더링)을 만들고 있지만 클라이언트 측 기능에 따라 다른 요소에 값이 있으면 HTTP 일부 입력 필드를 호출하거나 유효성을 검사합니다.

이제 저는 WebComponents (종이 요소 및 기타)를 사용하여 UI를 만들고 바닐라 자바 ​​스크립트 (일부 Polyfills, WebComponents.js 또는 fetch.js)를 사용하여 기능을 수행합니다.

그러나 지금까지는 Vue와 같은 프레임 워크로 축소 (또는 삭제할 수도 있음) 할 수있는 많은 JavaScript 행 (예 : 조건이 충족되지 않으면 입력 필드 숨김)이 있음을 알고있었습니다. js 및 지시문이있는 expresive HTML.

내 문제는 Vue.js를 종이 요소 또는 다른 요소와 함께 사용하려고하면 v-model과 같은 Vue.js 지시문이 작동하지 않습니다 (종이 요소 값 속성도 표준 HTML 요소와 마찬가지로 value 임).).

내가 대신 v-model의 :value를 사용했는데,이 작품,하지만 바인딩 하나의 방법은 데이터 (이 v-bind 정상입니다)하지만 난 paper-elements 바인딩 두 가지 방법으로 데이터를해야하고, v-model가 작동하지 않습니다.

편도 데이터 바인딩 (예 : :disabled="someCondition")을 나타내는 콜론 (축약어)을 사용하는 동안 (예 : :disabled="someCondition") 어떤 속성에서 양방향 데이터 바인딩을 나타내려면 두 개의 콜론을 사용하십시오. 일부 WebComponents에서는 유용 할 수 있습니다 value 이상의 다른 HTML 속성에서 수행하십시오 (예 : ::value).

누군가가 Vue.js 같은 expresive HTML 어떤 프레임 워크를 알고는 구현 데이터 (모든 HTML 속성에 양방향) 및 기본 제어 구조 (같은 v-if 및 v-repeat)를 결합 또는 뷰와 어떤 HTML 속성에 바인딩 두 가지 방법으로 데이터를 어떻게 먹으 렴 .js (더 간단하게, 종이 요소로 v-model 작업을 수행하십시오).

WebComponents를 Vue.js의 기능으로 만들지 모르겠다. Polymer를 사용하기 때문에.

고마워요!

Answer 1

당신이 :value="value" @input="value = $event.target.value"

대신 v-model="value"

Answer 2

네, 아우렐 리아와 함께 할 수 있습니다 : VueJs와

<input value.two-way="variable">