logo标签列表

如何在点击事件处理程序中从jQuery访问Vue数据

jqueryvue.js
4

I have a vue component as

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

我正在使用jQuery处理点击事件，代码如下：

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

我想从jquery事件处理程序中访问vue数据模型，我该怎么访问它？

请问您能否添加更多的脚本并解释为什么要在jQuery中访问Vue的内容？ - Ayaz Ali Shah
你几乎100%做错了。让Vue处理点击事件，而不是jQuery。 - connexo
同意这可能不是最好的做法。但是你可以像这个人一样将你的根实例保存到全局窗口变量中：https://www.rent-a-hero.de/wp/2017/08/25/how-to-call-methods-of-a-vuejs-app-from-outside/ - James Wesc
最好是从Vue内部添加处理程序，可能是从mounted生命周期钩子内部添加。 - James Wesc
@JamesWesc为什么他不直接在.models元素上添加v-on:click指令呢？ - connexo
3个回答
4
我不知道您的用途，但是您可以使用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>

这个方法可以运行，但不是最佳实践。请查看connexo的答案，了解在Vue中处理事件的正确方式。 - jarrodwhitley
1
不要混淆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>

这只是两个简单的例子。如果任务如此琐碎，您可以使用+-按钮代码；否则，您需要在视图模型的methods对象中创建一个function。
1
在Vue.js中，我创建了一个方法并在beforeMount中调用它：
 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()
        }
    })
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接