Vue @click.native 不工作? [英] Vue @click.native not working?
问题描述
我有这样的导航组件:
<nav class="navbar navbar-default navbar-fixed-top"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="">网站构建器</a><div><div class="collapse navbar-collapse" id="myNavbar"><ul class="nav navbar-nav"><li><a href="#" @click.native="currentView='create'">创建</a><li><a href="#" @click.native="currentView='how'">How</a><li><a href="#" @click.native="currentView='about'">关于</a><li><a href="#" @click.native="currentView='youtube'">视频</a>
</nav></模板>
和我的js:
Vue.component('navigation', Navigation)Vue.component('创建', 创建)Vue.component('how', How)Vue.component('about', 关于)Vue.component('youtube', Youtube)新的 Vue({el: '#app',数据: {当前视图:'创建'}和 html:
<导航></导航><保持活力><transition name="slide-fade" mode="out-in"><component :is="currentView"></component></保持活动>然而，当我点击导航时，它不会改变，因此我假设它不能正常工作.如果我将导航从组件中移开并将其粘贴在 div id=app 中，它可以正常工作，为什么会发生这种情况?
.native修饰符在原生元素上不是必需的 - 它只能用于组件元素.删除它.您似乎想更改根组件中的数据.您当前的代码更改了导航组件中的数据.
有两种方法可以做到这一点:
1) 干净的方式:
在导航组件中，我们向父级发出一个带有新值的事件:
在父(这里是根)组件中，我们接收事件并设置值:
<navigation @current-view="currentView = $event"></navigation>2) hacky 方式:
I have navigation component like this:
<template>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="">Website Builder</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>
<a href="#" @click.native="currentView='create'">Create</a>
</li>
<li>
<a href="#" @click.native="currentView='how'">How</a>
</li>
<li>
<a href="#" @click.native="currentView='about'">About</a>
</li>
<li>
<a href="#" @click.native="currentView='youtube'">Videos</a>
</li>
</ul>
</div>
</div>
</nav>
</template>
and my js:
Vue.component('navigation', Navigation)
Vue.component('create', Create)
Vue.component('how', How)
Vue.component('about', About)
Vue.component('youtube', Youtube)
new Vue({
el: '#app',
data: {
currentView: 'create'
}
and html:
<div id="app">
<navigation></navigation>
<keep-alive>
<transition name="slide-fade" mode="out-in">
<component :is="currentView"></component>
</transition>
</keep-alive>
</div>
However when I click on navigation, it doesn't change therefore I am assuming it's not working properly. if I put navigation away from component and stick it in div id=app it works fine, why is this happening?
The
.nativemodifier is not necessary on native elements - it can only be used on component elements. Remove it.It seems you want to change data in the root component. Your current code changes data in the navigation component.
Two ways to do this:
1) The clean way:
In the navigation component, we emit an event with the new value to the parent:
<a href="#" @click="$emit('current-view', 'youtube')">
in the parent (here, the root) component, we receive the event and set the value:
<navigation @current-view="currentView = $event"></navigation>
2) The hacky way:
<a href="#" @click="$root.currentView='youtube'">
这篇关于Vue @click.native 不工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
