Vue에서 "v-html"과 함께 추가된 콘텐츠에 "v-on"을 설정하는 방법

Vue에서 "v-html"과 함께 추가된 콘텐츠에 "v-on"을 설정하는 방법

Vue에서 다음을 추가할 수 있습니까?v-on추가된 문자열 이벤트v-html이 예에서는 'Maggie' 링크를 클릭해도 아무 일도 일어나지 않습니다.Vue에 등록되어 있지 않은 것 같습니다.

아니면 다른 방법이 있을까요?Vue.js 2.1.3을 사용하고 있습니다.

자바스크립트

window.onload = function() {
    new Vue({
        el: '#app',
        data: {
            users: ['Homer', 'Marge', 'Bart', 'Lisa', '<a href="#" v-on:click="click_user">Maggie</a>']
        },
        methods: {
            click_user: function() {
                console.log('Click user')
            },
        }
    })
}

HTML

<div id="app">
    <div v-for="user in users" v-html="user"></div><br>
    <a href="#" v-on:click="click_user">This works.</a>
</div>

vue 문서에서:

요소의 내부를 업데이트합니다.HTML. 내용은 플레인 HTML로 삽입되며 Vue 템플릿으로 컴파일되지 않습니다.v-html을 사용하여 템플릿을 구성하려는 경우 대신 구성 요소를 사용하여 솔루션을 다시 생각해 보십시오.

즉,v-on내부에서는 동작하지 않는다v-html동작하려면 vue가 필요하기 때문입니다.

---

고객 고유의 문제에 대한 잠재적인 해결책

조건부로 링크를 렌더링하다v-if그렇지 않으면 일반 텍스트를 렌더링합니다.

new Vue({
  el: '#app',
  data: {
    users: [
      { name: 'Homer', clickable: false },
      { name: 'Marge', clickable: false },
      { name: 'Bart', clickable: false },
      { name: 'Lisa', clickable: false },
      { name: 'Maggie', clickable: true },
    ]
  },
  methods: {
    click_user: function() {
      console.log('Click user')
    },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.0/vue.js"></script>

<div id="app">
  <div v-for="user in users">
    <div v-if="!user.clickable">{{user.name}}</div>
    <a v-if="user.clickable" href="#" v-on:click="click_user">{{user.name}}</a>
  </div>
</div>

렌더링<a href="#" v-on:click="click_user">Maggie</a>와 함께v-html는 클릭 이벤트를 바인드하지 않습니다.자세한 내용은 문서를 참조하십시오.그것은 그냥 렌더링할 것이다.v-on:click아트리뷰트로서

단순한 데이터 어레이를 유지합니다.필요없을 것 같은데v-html. 둘 중 하나를 사용합니다.text또는index와 함께if(1개 또는 2개) 또는switch(복수의 경우) 이벤트를 트리거하기 위한 조건입니다.

window.onload = function() {
    new Vue({
        el: '#app',
        data: {
            users: ['Homer', 'Marge', 'Bart', 'Lisa', 'Maggie']
        },
        methods: {
            click_user: function(text) {
              if(text=='Maggie') console.log('Click user')
            }
        }
    })
}

<div id="app">
   <div v-for="user in users" v-on:click="click_user(user)">{{user.name}}</div><br>    
</div>

또는

window.onload = function() {
  new Vue({
      el: '#app',
      data: {
          users: ['Homer', 'Marge', 'Bart', 'Lisa', 'Maggie']
      },
      methods: {
        click_user: function(index) {
          if(index==4) console.log('Click user')
        }
      }
   })
}

<div id="app">
   <div v-for="user,index in users" v-on:click="click_user(index)">{{user.name}}</div><br>    
 </div>

구성 요소를 생성하고 사용자 var를 전달해야 합니다.다음은 여러분이 할 수 있는 일의 예입니다.

<users-list v-for="user in users" v-bind:user="user"></users-list>

다음은 간단한 기능 예를 제시하겠습니다.https://jsfiddle.net/leocoder/tor13m26/1/

v-html을 사용하는 것은 좋지 않은 방법인 것 같습니다.

언급URL : https://stackoverflow.com/questions/41020059/how-to-set-v-on-on-content-added-with-v-html-in-vue