从 jQuery 点击事件中设置一个 vue.js 数据答案

【问题标题】：Set a vue.js data from jQuery click event从 jQuery 点击事件中设置一个 vue.js 数据
【发布时间】：2016-02-12 20:13:18
【问题描述】：

我有一个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。我怎样才能做到这一点？

【问题讨论】：

标签： jquery vue.js

【解决方案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/

【讨论】：

【解决方案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
      }
  },
});

【讨论】：