@posva 계산 속성은 재사용할 수 없습니다.

거의 모든 것이 믹스인을 통해 재사용 가능합니다.
믹스인을 생성하는 함수를 사용할 수 있습니다. 이렇게 하면 바인딩할 수 있습니다.
속성을 동적으로 계산합니다. 나는 지금 바이올린에 그 예를 넣을 수 없습니다
하지만 최대한 빨리 할 것입니다.
그러나 입력에 대한 매우 일반적인 사용 사례라는 데 동의합니다.
변형이 적용되었습니다. 적절한 API 또는 최소한의 설명
가이드가 필요합니다

2016년 9월 13일 화요일, 18:48 Francisco Lourenço, [email protected]
썼다:

@posva https://github.com/posva 계산 속성은 재사용할 수 없습니다.

—
당신이 언급되었기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/vuejs/vue/issues/3666#issuecomment -246746524 또는 음소거
스레드
https://github.com/notifications/unsubscribe-auth/AAoicf33lCvETQc9LBQ5GGZ93ExPcLS_ks5qptPegaJpZM4J7vQ0
.

거의 모든 것이 믹스인을 통해 재사용 가능합니다.
믹스인을 생성하는 함수를 사용할 수 있습니다. 이렇게 하면 바인딩할 수 있습니다.
속성을 동적으로 계산합니다. 나는 지금 바이올린에 그 예를 넣을 수 없습니다
하지만 최대한 빨리 할 것입니다.
그러나 입력에 대한 매우 일반적인 사용 사례라는 데 동의합니다.
변형이 적용되었습니다. 적절한 API 또는 최소한의 설명
가이드가 필요합니다

다시 말해 계산된 속성은 재사용할 수 없습니다. 해결 방법으로 팩토리 함수 + 믹스인을 사용할 수 있지만 유용성과 가독성은 비교되지 않습니다.

내 프로젝트의 경우 이 기능이 절실히 필요했기 때문에 권장되는 사용자 지정 입력 방식을 사용했습니다.

InputCustom.js

define(function () {
  return Vue.extend({
    data: function () {
      return {
        focused: false
      };
    },
    template: '<input @focus="onFocus" @blur="onBlur" @input="onInput" @change="setDisplayValue">',
    props: ['value'],
    watch: {
      value: function () {
        if (!this.focused) {
          this.setDisplayValue();
        }
      }
    },
    mounted: function () {
      this.setDisplayValue();
    },
    methods: {
      onInput: function () {
        this.$emit('input', this.parse(this.$el.value));
      },
      onFocus: function () {
        this.focused = true;
      },
      onBlur: function () {
        this.focused = false;
        this.setDisplayValue();
      },
      setDisplayValue: function () {
        this.$el.value = this.format(this.value);
      }
    }
  });
});

입력텍스트.js

define(['js/InputCustom'], function (InputCustom) {
  return InputCustom.extend({
    methods: {
      parse: function (val) {
        val = val.trim();
        return val === '' ? null : val;
      },
      format: function (val) {
        return val === null ? '' : val;
      }
    }
  });
});

제 생각에는 이 접근 방식이 매우 편리하며 .lazy 를 포함하여 v-model 수정자를 전혀 사용하지 않기로 결정했습니다.

내장 수정자가 지원할 수 없는 보다 맞춤화된 사용 사례의 경우 @ecmel 이 언급한 것이 권장되는 접근 방식입니다. 공식 가이드에서 더 자세히 설명하겠습니다.

이 기능 제안의 아이디어는 이미 모든 input 요소와 함께 작동하는 기존 v-model 지시문을 활용하는 것입니다. 모든 프로젝트에서 _InputCustom.js_를 작성하는 작업을 저장하려면 v-model 에서 이미 수행되었으므로 사용자 지정 수정자에서 _InputText.js_에 해당하는 항목만 작성하면 됩니다. 여기에는 필요한 모든 논리가 포함되어 있습니다. 대부분 수정됩니다. v-model 가 이미 수식어와 함께 제공된다는 사실은 이것이 직관적이고 바람직한 패턴임을 증명합니다. 사용자 정의 수정자 생성을 용이하게 하고 사용자 정의 요소를 생성하고 dom/model 바인딩을 수동으로 구현해야 하는 작업을 저장하는 것은 자연스러운 일입니다.

API 관점에서 이해가 된다면 이 기능을 구현하지 않기로 결정한 기술적 한계가 무엇인지 아는 것이 흥미로울 것입니다.

이 문제를 다시 열 수 있는 기회가 있습니까? 저에게 일반적인 사용 사례는 입력되는 필드의 데이터 형식을 자동으로 지정해야 하는 것입니다. '101216'을 가져와 '10/12/16'으로 바꾸는 것과 같은 것입니다. 사용자 정의 v-model 수정자를 생성할 수 있다는 것은 props 및 이벤트로 사용자 정의 입력 구성 요소를 빌드할 필요 없이 v-model.date를 작성할 수 있기 때문에 내 코드를 크게 단순화할 것입니다.

내 프로젝트에서 잠시 동안 vue js를 사용한 후 이 문제는 실제로 다시 열려야 한다고 생각합니다.

최소한 undef 수정자가 필요합니다.

이 문제를 다시 시작해야 한다는 데 동의합니다. undef 이 무엇을 하기로 되어 있었는지 확실하지 않지만, 입력의 트리밍된 값이 빈 문자열인 경우 내 변수를 null 로 설정하는 v-model 수정자를 원합니다.

직접 직접 할 수 있으면 좋겠습니다.

예를 들어 https://github.com/vuejs/vue/issues/5194 에 이보다 더 많은 기능이 추가되었습니다. 외부에서 Vue는 react 커뮤니티에서 장려하는 관습 및 관행에 찬성하여 일부 원칙을 천천히 타협하는 것으로 보입니다. 처음에 눈에 띄는 특성에서 약간 벗어났습니다. 이것이 반응에서 마이그레이션을 더 쉽게 만들려는 의도가 있는 의식적인 결정인지 아니면 우연의 일치인지 아는 것이 흥미로울 것입니다.

사용자 지정 구성 요소를 작성하는 것은 좋지만 https://github.com/text-mask/text-mask/tree/master/vue#readme 와 같은 타사 사용자 지정 구성 요소를 사용하려는 경우 마스크를 삭제하는 직접적인 방법은 없습니다. 계산된 속성을 사용하는 것을 제외하고 모델 값에 대한 입력.

그래서, 저는 HTML 표준 입력[type=date] 필드를 사용하여 제 모델의 날짜 유형을 편집하고 싶습니다. 이 놀랍도록 강력하고 확장 가능한 프레임워크는 즉시 이를 수행할 수 없습니까? 필드에서 날짜를 읽을 수 없습니다. 날짜를 선택한 후 데이터의 문자열로 날짜를 덮어씁니다. 이 솔루션은 양방향 필터 또는 수정자를 사용하여 두 줄로 작성할 수 있습니다.

그러나 가장 좋은 해결책은 확인란 및 기타 표준 입력 필드와 마찬가지로 기본적으로 지원하는 것입니다. "날짜"가 특별한 이유는 무엇입니까?

사용자 정의 수정자의 경우 +1. 하지 말아야 할 합당한 이유가 없는 한 아무 생각도 하지 않는 것처럼 보입니까?

애플리케이션 사용을 위해 입력을 마스킹하고 값을 구문 분석하는 것은 매우 일반적인 관행이며 v-model.lazy.currency="amount"와 같은 일부 "합성 설탕"을 만드는 것은 놀라운 일입니다!

사용자 지정 수정자의 경우 1+.
문자열로 평가되는 true|false 값이 있는 간단한 라디오 입력이 있습니다. 하지만 부울 값으로 필요합니다. 모든 라디오 입력에 대해 계산된 속성을 다시 구현해야 하기 때문에 이 경우 계산된 속성은 현명하지 않습니다. 예를 들어 100개의 라디오 입력이 있으면 100개의 속성이 계산됩니다.

사용자 지정 수정자는 +1이지만 tobei에 동의합니다 -- input[type=date]는 자동으로 작동해야 합니다.

사용자 정의 수정자의 경우 +1.

저는 Angular 배경에서 왔으며 vue로 시작하여 이 스레드를 보았습니다.

Vue에서도 Angular의 파서 및 포맷터와 같은 것을 갖는 것이 정말 도움이 될 것이라고 생각합니다. v-model.dateFormat과 같은 작업을 수행하고 mm/dd/yyyy와 같은 결과를 얻을 수 있다면 정말 멋질 것입니다.

편집: @restored18 이 말한 내용을 반복한 것 같습니다. 너에게도 +1

사용자 정의 v-모델 수정자의 경우 +1.

제 경우에는 JSON에서 검색된 몇 개의 중첩된 객체를 반복하고 단일 HTML 템플릿(객체당 템플릿이 아닌)을 사용합니다. 이 경우 계산된 속성이 작동하지 않는다고 생각합니까?

저는 현재 데이터를 가져오고 보낼 때 서버 형식과 v-모델 형식 간에 사용자 지정 변환 방법을 입력하고 있지만 함수를 전달할 수 있는 "내장" 기능을 원합니다.

이것에 +1. 2.2 이전에는 사용할 수 있었습니다. 다음을 통해 속성에 액세스할 수 있습니다.

this.$vnode.data.directives

사용자 지정 모델 입력 값을 추가하여 제거되었지만 매우 유용한 기능이었고 프레임워크에 다시 있어야 합니다.

이것에 대해 +1.

사용자 정의 v-모델 수정자는 훌륭할 것입니다!

저도 요

2018년에도 +1 ...

+1 제 생각에는 DRY 코드에 필요한 기능입니다. 지금 당장은 입력이 많은 양식에 대해 동일한 작업을 수행하는 10명의 감시자를 만들어야 합니다. 사용자 정의 수정자는 모든 것을 해결할 것입니다.

+1 방금 vue를 시작했고 이미 이러한 유형의 양방향 필터가 필요합니다 ...

+1 반드시 필요합니다

+1

대부분의 사용 사례에 대해 이와 같은 도우미를 구축할 수 있습니다.

@nickmessing 은 여기에 설명된 (정말 유용한) 사용 사례를 다루지 않습니다. 이는 입력 텍스트의 내부 수정입니다. 항상 전화처럼 형식을 지정하려는 입력 상자가 있는 경우 <input v-model.phone="some_data"> 가 됩니다. 사용자가 텍스트를 입력하면 자동으로 서식이 지정됩니다.

이것은 그런 기본적인 기능인 것 같고 지금 생각해야 할 것보다 더 어렵습니다. 이 동작은 프레임워크에 이미 존재하지만 어떤 이유로 프레임워크 전용 코드로 제한됩니다. 필터 및 지시문이 현재 있는 것처럼 구성 요소와 프로젝트에서 재사용할 수 있는 사용자 지정 수정자를 추가할 수 있기를 원합니다.

@bbugh 전적으로 동의합니다. 저는 IBAN을 포맷하는 것과 비슷한 경우를 겪고 있으며 v-model.iban="payment.iban" 를 거기에 단순히 넣는 것이 멋지고 선언적인 방법이 될 것입니다...

@franciscolourenco 누군가가 프레임워크에서 지원하지 않아야 하는 이유를 설명하여 더 명확해 질 수 있습니다.

사용자 지정 수정자의 경우 +1, 이 기능으로 수행할 수 있는 많은 사용 사례가 있습니다.

우리 응용 프로그램에는 통화 형식을 지정하는 입력이 거의 없으며 항상 모델에 센트 금액을 저장하지만 입력에 멋지게 형식이 지정된 달러 금액을 표시합니다(따라서 모델의 123456은 $1,234.56으로 표시됨) <input v-model.dollars="cents" />

다른 사용 사례는 XSS 공격을 방지하기 위해 html 필드를 삭제하고 이스케이프 해제하는 것입니다(입력이 " A & B "를 표시하는 동안 모델은 " A & B "를 저장) <input v-model.html="text" />

+1

+1

사용자 정의 수정자의 경우 +1.
v-model.trim.uppercase=... 같은 걸 할 수 없어서 정말 놀랐어요

+1

+1

+1

+1
기본 v-model 입력 수정자는 훌륭한 기능입니다. 사람들이 여기에서 언급했듯이 많은 사용 사례가 있습니다. 내가 작업한 모든 프로젝트에 대해 날짜 및 통화 수정자가 필요했습니다.

여기서 문제를 열어야 합니까? https://github.com/vuejs/rfcs

나는 이미 이것을 +1했지만 "지금" 무언가가 필요한 사람들을 위해 메모를 던지고 싶습니다.

modifier가 훨씬 더 효율적이지만 계산된 getter/setter 필드가 있는 투명한 입력/구성 요소를 사용하여 동일한 효과를 얻을 수 있었습니다.

누군가가 필요하면 예를 공유 할 수 있습니다

이 겉보기에 쉬워 보이는 기능에는 고려해야 할 사항이 많기 때문에 구현하지 않았습니다.

• 내장 수정자는 실제로 다른 컴파일된 코드를 생성하는 컴파일 타임 힌트입니다. 사용자 지정 수정자는 다른 메커니즘인 런타임 구성을 사용하여 정의해야 할 수 있습니다.

• 런타임 구성의 경우 이를 위해 어떤 종류의 API를 노출해야 합니까?

• 과거에는 양방향 필터가 있었습니다. 양방향 값 변환에서는 양방향 바인딩이 안정화될 수 있도록 사용자가 완벽한 논리를 구현해야 합니다. 그렇지 않으면 극단적인 경우에 대해 전체 앱을 무한 루프에 빠뜨릴 위험이 있습니다.

  • .number 및 .trim 가 있는 이유는 실제로 단방향 변환(DOM 값을 구성 요소 데이터에 동기화할 때만 적용됨)이므로 안정화가 보장되기 때문입니다.

• v-model 가 구성요소에서 사용될 때 사용자 정의 수정자는 어떻게 작동해야 합니까?

• radio , checkbox 및 가장 중요한 <select> 와 같은 텍스트가 아닌 입력 유형에서 사용자 지정 수정자는 어떻게 작동해야 합니까?

이 모든 질문은 답이 없으며 요청을 보기보다 복잡하게 만듭니다. 이것이 내가 이 기능을 정말로 원하는 사람이 있다면 이 모든 것을 다루는 적절한 RFC의 좋은 후보가 될 것이라는 데 동의하는 이유입니다. 그때까지는 더 많은 +1이 어떤 식으로든 앞으로 나아가지 않습니다.

@rkingon https://github.com/vuejs/vue/issues/3666#issuecomment -249583603에 이미 예가 있지만 귀하의 것이 다르거나 더 나은 경우 게시하십시오. 초보자에게 유용할 수 있습니다.

@Gotterbild 나는 그 샘플을 놓쳤지만 Vue의 이후 버전에서는 훨씬 복잡했습니다(이것은 사전 투명 구성 요소 지원이었을 수 있음)

여기에 내가 퍼센트를 십진수로 변환하는 매우 간단한 것이 있습니다(예: 4.5 -> .045) 및 그 반대로("보기" 값 및 "모델" 값)

<template>
    <input type="number" v-on="listeners" v-model="innerValue">
</template>

<script>

    export default {
        props: ['value'],
        computed: {
            listeners () {
                const { input, ...listeners } = this.$listeners
                return listeners
            },
            innerValue: {
                get () {
                    return (this.value) ? `${(this.value * 100)}` : ''
                },
                set (_val) {
                    const val = (_val) ? (_val / 100) : ''
                    this.$emit('input', val)
                }
            }
        }
    }

</script>

모든 초점/흐림 효과 등을 다시 지정할 필요가 없기 때문에 위의 것보다 더 간단합니다.

@yyx990803 이 주제에 대해 더 많은 배경 정보를 제공해 주셔서 감사합니다.

내 사용 사례의 경우 사용자 지정 수정자가 "필요"하지 않습니다. 소비자의 관점에서 볼 때 vue가 자체적으로 빌드할 수 있는 방법이 있다는 것이 이해가 될 것입니다. 기본적으로 수식어를 제외한 모든 것에 대해 😄

내 변환 논리를 적절하게 캡슐화하고 재사용할 수 있는 무언가를 만드는 방법을 찾을 수 있지만, 그러한 사용 사례에 적절한 API를 갖는 것이 "최고의- 연습 수정자".

문자열을 대문자로 변환하는 수정자를 만들고 싶었기 때문에 여기에 왔습니다.
v-model.uppercase="username" 처럼 만들고 싶었습니다.

나는 사용자 정의 지시문을 사용하여 끝났습니다.

Vue.directive('uppercase', {
    update (el) {
        el.value = el.value.toUpperCase()
    },
})

<input type="text" v-model="username" v-uppercase>

사용자 지정 지시문은 대안으로 충분해야 합니다.
아니면 커스텀 v-model modifier로만 가능한 것이 있습니까?

v-model 를 고려 하는 @Christhofernatalius 는 단순히 지시문입니다. 사용자 지정 지시문을 위해 v-model 를 제거할 수 없습니까? 이렇게하면 두 번 업데이트하지 않습니까?

v-model 를 고려 하는 @Christhofernatalius 는 단순히 지시문입니다. 사용자 지정 지시문을 위해 v-model 를 제거할 수 없습니까? 이렇게하면 두 번 업데이트하지 않습니까?

@rkingon 업데이트가 두 번인가요?
따라서 v-model을 사용하지 않으면 입력 수신기에 대한 바인딩 및 바인딩 해제 후크도 추가하고 사용자 이름 값을 업데이트해야 합니까?

편집 : setter 및 getter로 계산을 사용하면 두 번 업데이트되지 않습니까?
편집 2: 콘솔 로그 감시자와 지시문을 시도했는데, 각각은 모든 키 입력에 대해 한 번만 인쇄됩니다.

나는 그것을 시도하지 않았습니다. 단지 추측일 뿐입니다. 하나의 값을 업데이트하는 두 개의 지시문에 대한 아이디어는 저에게 약간 우스꽝스럽게 느껴질 수 있지만, 확인해 보면 아무런 문제가 없다고 생각합니다.

내 구성 요소 해결 방법에는 제한 사항이 있으므로 여전히 수정자를 선호합니다. ) 대 지시문의 힘인 임의의 구성 요소/요소에서 단순히 사용할 수 있다는 것입니다.

고양이 가죽을 벗기는 두 가지 방법, 옵션이 있어서 좋아요 :)

이에 대한 RFC가 있습니까?

나는 그렇게 생각하지 않는다

만들 수는 있지만 RFC 리포지토리 또는 다른 항목에 문제를 추가한다는 의미입니까?

https://github.com/vuejs/rfcs#what -the-process-is 이것이 귀하의 질문에 대한 답변입니까?

이거 재개봉 가능한가요? 사용자 지정 지시문은 경우에 따라 작동할 수 있지만 동작이 재미있을 수 있습니다. 예를 들면 다음과 같습니다.

Vue.directive('number', {
  update: function(el, binding, vnode) {
    el.value = el.value.replace(/[^\d.]/g, '');
  },
});

이 지시문(v-model과 함께)을 추가하고 다른 모든 키스트로크마다 정말 빠르게 문자를 입력하면 v-model 가 el.value 와 동기화되지 않습니다. 그리고 수신한 바인딩 객체를 수정할 수 없기 때문에 이 지시문 내에서 v-model을 "재구현"할 방법이 없습니다.

@jeankvd 과도하게 느껴진다는 것을 알고 있지만 래퍼 구성 요소가 가장 안정적일 것입니다(위의 예 참조).

래퍼 구성 요소를 사용하면 "더 많은 작업"도 수행할 수 있습니다. "숫자" 예에서 이상적으로는 v-model이 실제로 Number 됩니다. 귀하의 접근 방식에서는 여전히 String 입니다.

빈 값을 사용자 지정하려면 어떻게 해야 합니까? 빈 문자열? 없는? 한정되지 않은? -- emptyValue 에 대한 소품을 전달하고 그렇게 설정할 수 있습니다.

한 번 이것을 옹호했지만 수정자가 너무 많은 제한 사항이 있고 구성 요소를 갖는 것이 훨씬 우수하다는 것을 곧 깨달았습니다(적어도 imo).