Question

我有一个vue组件

var app_3 = new Vue({
    el:'#app-3',
    data() {
        return {
            step:1,
            models:''
        }
    }
});

我正在使用处理事件 jQuery之类的

$('body').on('click', '.models', function() {
});

我想从jquery事件处理程序访问vue数据模型。我该如何访问？

Answer 1

在 Vue Js 上，我创建了一个方法并在 Mount 之前调用它：

 var app_3 = new Vue({
        el:'#app-3',
        data() {
            return {
                step:1,
                models:''
            }
        },
        methods: {
            // called by beforeMount()
            foo() {
                let proxy = this
                $('body').on('click', '.models', function() {
                    // call a method
                    proxy.bar()
                    // set a variable data
                    proxy.step = 2
                });
            },
            // called each .model click
            bar(){
                console.log('it id working');
            }
        },
        beforeMount() {
            this.foo()
        }
    })

Answer 2

我不知道您的目的，但您可以使用app_3.step来获取和设置vue数据。

var app_3 = new Vue({
    el:'#app-3',
    data() {
        return {
            step:1,
            models:''
        }
    }
});

$('body').on('click', '.models', function() {
app_3.step +=1;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<body>
<div id="app-3">
  Step : {{step}}
</div>
<button class="models">Models</button>
</body>

Answer 3

不要一起处理jQuery和Vue。 Vue具有事件处理所需的所有必要工具。

var app_3 = new Vue({
    el:'#app-3',
    data() {
        return {
            step: 1,
            models:''
        }
    },
    methods: {
      decreaseStep() {
        this.step -= 1
      }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app-3">
  Step : {{step}}
  <button @click="step+=1">+</button>
  <button @click="decreaseStep">-</button>
</div>

这些只是两个简单的示例。如果任务是如此琐碎，那么您将使用+按钮代码，否则，您将在视图模型的function对象内创建一个methods。

如何从Click事件处理程序上的jQuery访问Vue数据

3 个答案: