Vue.js 구성 요소 메서드에서 템플릿 업데이트

Question

구성 요소의 특정 메서드가 호출 될 때 구성 요소 템플릿을 업데이트하려고합니다. resolve 함수 나 Vue.compile 렌더링 옵션, 또는 v-html 바인딩 옵션 (실제로는 템플릿을 컴파일하는 것과 같다)과 같다.

어떻게 구성 메소드에서 resolve 함수를 호출 할 수 있습니까?

이것이 가능하며 Vue.js로 어떻게해야합니까?

Answer 1

구성 요소의 data 함수의 반환 개체 변수 인 so에서 업데이트 할 내용을 정의합니다. 구성 요소 (예 : Vue.extend)를 사용하는 경우 데이터가 있어야 함

그런 다음 메서드를 정의하고 과 같이 메서드에서 this.whateverYouNamedYourVariable을 변경합니다.

그런 다음 v-on 또는 프로그래밍 방식으로 메서드를 호출합니다. 다음은 v-on 이벤트 바인딩에 대한 링크입니다. Vue docs

그리고 webpack을 사용한 간단한 예입니다.

<template> 
    {{me}} 
    <button v-on:"changeMe">Click to change!</button> 
</template> 

<script> 
import 'vue' from 'vue'; 
export default { 
    name: 'VueEventBindDemo', 
    data: function() { 
     return { me: 'isMe'} 
    }, 
    methods: { 
     changeMe: function() { 
      this.me = "isYou"; 
     } 
    } 
} 
</script>