設定從jQuery的單擊事件

Question

一個vue.js數據我有一個Vue.js爲例說明如下：

new Vue({ 
    el: '#app', 
    data: { 
     active: '' 
    } 
    methods: { 
     addActive: function(){ 
     $(document).on('click', '[prop-name]', function(){ 
       this.active = {name: $('this').attr('prop-name'), latitude: $('this').attr('prop-lat'), longitude: $('this').attr('prop-long'), icon: $('this').attr('prop-icon')}; 
      }.bind(this)); 
     } 
    } 
}); 

我想，當我觸發addActive方法來設置數據active。但我想我無法設置active，就像我在這裏做的那樣。我怎樣才能做到這一點？

Answer 1

我不相信這是慣用的Vue，但我相信你試圖做到這一點的背後有一個原因。無論如何，這解決您的問題：

new Vue({ 
    el: '#app', 
    data: { 
     active: { 
     }, 
    }, 
    ready: function() { 
     this.addActive(); 
    }, 
    methods: { 
     addActive: function(){ 
      $(document).on('click', '[prop-name]', function (e) { 
       var target = e.target; 
       this.active = { 
        name: $(target).attr('prop-name'), 
        latitude: $(target).attr('prop-lat'), 
        longitude: $(target).attr('prop-long'), 
        icon: $(target).attr('prop-icon'), 
       }; 
     }.bind(this)); 
     } 
    } 
}); 

的jsfiddle這裏：https://jsfiddle.net/3hbr9rza/

Answer 2

你實際上並不需要的jQuery對於我認爲這是一個更「Vue公司的方式」來做到這一點。

這裏是工作提琴： http://jsfiddle.net/q4ky8g9r/

HTML：

<div v-for="prop in props" 
     v-set-active-prop="active" 
     prop-name="test-{{$index}}" 
     prop-lat="1.111" 
     prop-long="2.2222" 
     prop-icon="icon.png" 
     class="xpto" 
    > 
     I have many props (click me) 
    </div> 

    <div v-if="active"> 
     <p>{{active.name}}</p> 
     <p>{{active.lat}}</p> 
     <p>{{active.long}}</p> 
     <p>{{active.icon}}</p> 
    </div> 

</div> 

Vue的指令：

Vue.directive('set-active-prop', { 
    twoWay: true, 
    bind: function() { 
     var el = this.el, 
      self = this; 

     el.addEventListener("click", function() { 
      var active = { 
      name: el.getAttribute('prop-name'), 
      lat: el.getAttribute('prop-lat'), 
      long: el.getAttribute('prop-long'), 
      icon: el.getAttribute('prop-icon') 
     } 
     self.set(active); 
     }); 
    }, 
    update: function (newValue, oldValue) { 


    }, 
    unbind: function() {} 
}) 

Vue的實例：

new Vue({ 
    el: '#app', 
    data: { 
     props: 4, 
     active: { 
     name: null, 
     lat: null, 
     long: null, 
     icon: null 
     } 
    }, 
});