html.erb 템플릿의 v-model이 함수()를 렌더링함 ({ [value code] } ）

html.erb 템플릿의 v-model이 함수()를 렌더링함 ({ [value code] } ）

Rails 6 앱에 Vue.js를 추가하는 중입니다.프로젝트에서는 터볼링크를 사용하고 있기 때문에 "vue-turbolinks"는 실을 통해 설치되며 Vue 구성은 다음과 같습니다.

import TurbolinksAdapter from 'vue-turbolinks';
import Vue from 'vue/dist/vue.esm';
Vue.use(TurbolinksAdapter);

document.addEventListener('turbolinks:load', () => {
  const app = new Vue({
    el: '[data-behavior="vue"]',

    data() {
      return {
        message: 'This string will update with input from text field',
      };
    },

    methods: {
      updateMessage(event) {
        this.message = event.target.value;
      },
    }
  });
});

my rails 템플릿(.html.erb)에는 Vuejs "v-model" 속성을 가진 텍스트 필드가 포함되어 있습니다.

  <div data-behavior="vue">
    {{ message }}
      <%= f.text_field :title, "v-model": "updateMessage" %>
  </div>

vue는 "v-model"이 함수(updateMessage)를 호출하는 대신 리터럴 함수를 출력하는 것을 제외하고 예상대로 작동하는 것 같습니다.그 결과 텍스트필드는 다음 값을 사용하여 렌더링합니다.

"function () { [native code] }"

그러나 "v-model"을 "v-on:input"으로 변경하면 원하는 대로 메시지가 업데이트됩니다.

여기서 무슨 일이 일어나고 있는지 설명해 주시거나 트러블 슈팅의 올바른 방향을 가르쳐 주세요.미리 시간 내주셔서 감사합니다.

템플릿 바인딩은 다음과 같이 작성합니다.

v-model 지시어를 사용하여 양방향 데이터 바인딩을 생성할 수 있습니다.

이벤트 리스너를 다음과 같이 연결합니다.

이벤트 리스너를 요소에 연결합니다.이벤트 유형은 인수로 나타납니다.표현식은 메서드 이름, 인라인 문 또는 수식자가 있는 경우 생략할 수 있습니다.

입력 이벤트에 이벤트청취자를 연결하려고 하는 것 같기 때문에 이것은 예상된 동작입니다.

사용했을 때v-model(기호), 입력에 입력하기 위해 표현식을 평가했습니다.value마치 원시적인 결합이었던 것처럼.당신의 표현이 함수가 되었기 때문에 당신은 그렇게 한 결과를 얻었습니다.

당신의 혼란은 아마도 ...라는 사실에서 비롯되었을 것이다.v-model는 바인딩이기도 하고 리스너이기도 한 특수한 구문입니다만, 이러한 구문은 사전에 정의되어 있습니다.즉, 사용할 때 자신의 청취자를 지정하는 것이 아니라 수신자가 수신되었을 때 변경할 모델을 지정합니다.input아이로부터의 이벤트.

언급URL : https://stackoverflow.com/questions/65485784/v-model-in-html-erb-template-renders-function-native-code