v-html 지시문에 지시문을 넣을 수 있는가?

v-html 지시문에 지시문을 넣을 수 있는가?

웹 기능을 만들고 있어.하지만 한가지 문제가 있어.v-html로 vue 지시어를 추가하는 html 구조를 여러 개 만들고 싶었지만 그럴 수 없었다.그렇다면 v-html로 vue 지시문을 렌더링하려면 어떻게 해야 하는가?

물론 나는 이것이 xss 취약성을 야기할 수 있다는 것을 알지만, 나는 상관하지 않도록 중요한 태그를 필터링할 것이다.

팁을 공유해줘!!

1. 나는 이미 Vue.compile 기능을 사용하고 있다.하지만 풀빌드만 지원해주는데 이건 내 경우와 맞지 않아.

2. <button @click="go()">go</button>이것이 내가 v-propert를 사용하여 만들고 싶은 것이다.그러나 @click 지시문은 렌더링되지 않는다...

이것은App.vue결과

그러나 Go 버튼은 Go 기능을 호출할 수 없었다.

---

앱뷰

<template>
  <div id="app">
    <input type="text" v-model="name" />
    <p v-html="name"></p>
    <!-- Below tag is what i want to make using v-html -->
    <!-- <button @click="go()">gogo</button> -->
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  data:function(){
    return {
      name:'',
    }
  },
  methods:{
    go(){
      alert('hi');
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

원하는 것은 문자열을 Vue.js 템플릿 구성 요소로 컴파일하는 것이다.':is' 명령을 사용하여 동적 구성요소를 참조하고 이 동적 구성요소의 로컬 문자열 데이터 및 기능을 기본 Vue 인스턴스 또는 구성요소에 바인딩할 수 있다.

예:

<div id="app">
  <div :is="dynamicComponent"></div>
</div>

new Vue({
  el: "#app",

  data: {
    template: '<button @click="sharedFun()">{{ sharedValue }}</button>',
    sharedValue: 'this is a shared value'
  },

  computed: {
    dynamicComponent() {
        let f_sharedFunWithContext = typeof this.sharedFunWithContext === 'function'
        ? this.sharedFunWithContext
        : () => {}

        return {
        template: this.template,

        // redirect every shared data here
        data: () => {
            return {
            sharedValue: this.sharedValue
          }
        },

        // redirect every shared methods here
        methods: {
            sharedFun: () => {
            return this.sharedFun()
          },

          sharedFunWithContext(params) {
            // 'this' contains dynamic component context
            return f_sharedFunWithContext(params);
          }
        }
      }
    }
  },

  methods: {
    sharedFun() {
        alert('do some secure stuff on root instance')
    },

    sharedFunWithContext() {
        alert('do some secure stuff on root instance')
    }
  }
})

JSFiddle 구현: https://jsfiddle.net/jexzywua/1/

참조URL: https://stackoverflow.com/questions/57781465/is-it-possible-put-in-directives-in-v-html-directive