如何在单击事件处理程序上从jquery访问vue数据
如何在单击事件处理程序上从jquery访问vue数据
提问于 2018-11-12 05:42:11
我有一个vue组件
var app_3 = new Vue({
el:'#app-3',
data() {
return {
step:1,
models:''
}
}
});我正在使用jquery处理一个单击事件，如
$('body').on('click', '.models', function() {
});我想从jquery事件处理程序访问vue数据models。我怎样才能进入它？
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-11-12 06:02:12
我不知道你的目的，但你可以使用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>
Stack Overflow用户
发布于 2018-11-12 06:13:53
不要把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对象内创建一个methods。
Stack Overflow用户
发布于 2021-04-14 14:05:26
在Vue Js上，我创建了一个方法，并在挂载之前调用它：
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提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53256467
复制相关文章
相似问题
腾讯云开发者
