- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 Vuetify 抽屉导航。打开它的元素位于标题中的单独组件(v-toobar-side-icon)中。我将抽屉的打开/关闭状态存储在商店中。我正在使用计算方法来获取抽屉的状态。我不断收到错误消息Computed property "drawerState" was assigned to but it has no setter.
我知道这是因为我必须使用 v-model
控制抽屉的可见性。我不想使用计算的 setter 来更改抽屉的状态,我想使用 click 方法。
我尝试使用 :value
而不是 v-model
但我也无法让它正常工作。我遇到的实际问题是抽屉导航控件(打开/关闭)在主页上工作,但是一旦我导航到另一个页面,它们就会停止工作。如果我导航回主页,它们仍然无法工作。 getter 和 setter 正在改变状态并更新它们应该的方式,但是 isActive
抽屉导航的属性保持 false
.
应用程序.vue
<template lang="pug">
v-app
app-NavDrawer
app-header
router-view
v-footer(app dark)
span © 2018 #[a(href="http://www.smellydogcoding.com") Smellydog Coding]
</template>
<script>
import Header from './components/header/Header.vue'
import NavDrawer from './components/header/NavDrawer.vue'
export default {
data () {
return {
}
},
components: {
appHeader: Header,
appNavDrawer: NavDrawer
}
}
</script>
<style>
html {
overflow-y: auto;
}
a {
text-decoration: none;
}
footer {
color: white;
}
</style>
<template lang="pug">
v-toolbar.mt-0(dark)
v-toolbar-side-icon(@click.stop="openDrawer")
router-link(to="/" tag="v-toolbar-title") Pool Math
</template>
<script>
export default {
methods: {
openDrawer() {
this.$store.dispatch('navDrawer','open');
}
}
}
</script>
<style scoped>
.toolbar__title {
cursor: pointer;
}
</style>
<template lang="pug">
v-navigation-drawer(v-model="drawerState" dark fixed temporary)
v-list.pa-1
v-list-tile(avatar tag="div")
v-list-tile-avatar
img(src="../../../public/v.png")
v-list-tile-content
v-list-tile-title Guest
v-list-tile-action
v-btn(icon @click.stop="closeDrawer")
v-icon close
v-list.pt-0(dense)
v-divider(light)
router-link(to="/s1p0" tag="v-list-tile" active-class="active").expansion-panel__header.how-to
v-list-tile-content
v-list-tile-title.text-xs-center How to Use This Website
v-expansion-panel
v-expansion-panel-content
div(slot="header") Section 1 - Conversions
router-link(to="/s1p0" tag="v-list-tile" active-class="active")
v-list-tile-content
v-list-tile-title 1.0 - Useful Conversions
router-link(to="/s1p1" tag="v-list-tile" active-class="active")
v-list-tile-content
v-list-tile-title 1.1 - Convert ounces to pounds
router-link(to="/s1p2" tag="v-list-tile" active-class="active")
v-list-tile-content
v-list-tile-title 1.2 - Convert fluid ounces to gallons
router-link(to="/s1p3" tag="v-list-tile" active-class="active")
v-list-tile-content
v-list-tile-title 1.3 - Convert fluid ounces to cups
router-link(to="/s1p4" tag="v-list-tile" active-class="active")
v-list-tile-content
v-list-tile-title 1.4 - Convert inches to feet
v-expansion-panel-content
div(slot="header") Section 2 - Area and Volume
router-link(to="/s2p0" tag="v-list-tile" active-class="active")
v-list-tile-content
v-list-tile-title 2.0 - Introduction to This Section
router-link(to="/s2p1" tag="v-list-tile" active-class="active")
v-list-tile-content
v-list-tile-title 2.1 - Area of a Swimming Pool
router-link(to="/s2p2" tag="v-list-tile" active-class="active")
v-list-tile-content
v-list-tile-title 2.2 - Area of a Hot Tub
router-link(to="/s2p3" tag="v-list-tile" active-class="active")
v-list-tile-content
v-list-tile-title 2.3 - Volume of Water in a Swimming Pool
router-link(to="/s2p4" tag="v-list-tile" active-class="active")
v-list-tile-content
v-list-tile-title 2.4 - Volume of Water in a Multi-Depth Pool
router-link(to="/s2p5" tag="v-list-tile" active-class="active")
v-list-tile-content
v-list-tile-title 2.5 - Volume of Water in a Hot Tub
router-link(to="/s2p6" tag="v-list-tile" active-class="active")
v-list-tile-content
v-list-tile-title 2.6 - Volume of Water in a Hot Tub with Seats
router-link(to="/s2p7" tag="v-list-tile" active-class="active")
v-list-tile-content
v-list-tile-title 2.7 - Volume of Water Loss in a Swimming Pool
router-link(to="/s2p8" tag="v-list-tile" active-class="active")
v-list-tile-content
v-list-tile-title 2.8 - Volume of Water Loss in a Hot Tub
v-expansion-panel-content
div(slot="header") Section 3 - Water Balance
router-link(to="/s3p0" tag="v-list-tile" active-class="active")
v-list-tile-content
v-list-tile-title 3.0 - Introduction to This Section
router-link(to="/s3p1" tag="v-list-tile" active-class="active")
v-list-tile-content
v-list-tile-title 3.1 - Calculate Saturation Index
router-link(to="/s3p2" tag="v-list-tile" active-class="active")
v-list-tile-content
v-list-tile-title 3.2 - Calculate Saturation Index - With CA
</template>
<script>
export default {
computed: {
drawerState() {
return this.$store.getters.navDrawer;
}
},
methods: {
closeDrawer() { this.$store.dispatch('navDrawer','close')}
}
}
</script>
<style scoped>
aside {
overflow-y: auto;
}
.navigation-drawer {
padding: 0 0 1.0rem;
}
.how-to {
border-bottom: 1px solid rgba(255,255,255,0.12);
}
.how-to .list__tile__title {
font-size: 1.15rem;
}
</style>
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
drawer: false
},
getters: { // send state to a component
navDrawer: state => {
return state.drawer
}
},
mutations: { // modify state synchronously
navDrawer: (state, command) => {
command === 'open' ? state.drawer = true : state.drawer = false;
}
},
actions: { // modify state aschronously
navDrawer: ({commit}, command) => {
commit('navDrawer', command)
}
}
});
最佳答案
如果您不想使用 v-model
,您可以通过 :value
将其替换为值的绑定(bind)属性,如你所说。但是如果你这样做,你将不得不收听@input
。事件,当值改变时引发。
在我看来,你可以通过替换 v-model
来实现你想要做的事情。对于 :value="drawerState"
并通过绑定(bind)新方法updateDrawerState
到@input
事件。
您的 NavDrawer.vue
将从
<template lang="pug">
v-navigation-drawer(:value="drawerState" @input="updateDrawerState" dark fixed temporary)
updateDrawerState(state) {
if (state) {
this.closeDrawer();
}
}
computed: {
drawerState: {
get() {
return this.$store.getters.navDrawer;
},
set(state) {
if (state) {
this.closeDrawer();
}
},
},
},
关于vue.js - Vuetify 抽屉导航工作一次然后停止,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48388834/
我目前正在试用抽屉小部件。我构建了一个带有汉堡菜单图标、标题文本和搜索图标的应用栏。 这是我的代码: ` import 'package:flutter/material.dart'; import
我仍然是 Flutter 的初学者,我想创建一个带有侧边抽屉和底部导航标签栏的 Flutter 移动应用程序。我创建了带有侧边抽屉和底部导航的应用程序,但我的问题是我想从抽屉和底部导航选项卡打开主页。
试图检查位置固定元素的宽度。单击菜单图标容器后,抽屉的宽度应从 0% 增加到 18%。如果单击文档正文,抽屉应关闭,但前提是抽屉的宽度为 18%。当我尝试将抽屉的宽度记录到控制台时,我得到了 0px,
我在 Flutter 项目中有一个简单的抽屉,我想让抽屉在用户滑动/打开时始终位于底部导航栏上方。我玩弄我的代码,但还找不到任何解决方案。 import 'package:flutter/m
我在抽屉里装了一个粘头。但是现在我在 header 和第一个ListTile项之间有一个空格。 如何删除此空间/将项目设置在标题的末尾? 谢谢你的帮助! (我必须删除一些ListTiles,因为它对于
我想提供一种使 antd 抽屉可调整大小的方法? 我读了一篇热门answer专门针对 material-ui/Drawer 但我希望用 antd 做一些非常相似的事情。 有没有人有类似的 antd 示
我想提供一种使 antd 抽屉可调整大小的方法? 我读了一篇热门answer专门针对 material-ui/Drawer 但我希望用 antd 做一些非常相似的事情。 有没有人有类似的 antd 示
是否有用于绘制/可视化图形的良好 C# 库?我说的是节点路径可视化而不是折线图等。 (最好是原生的,而不是 pstricks 的包装器或类似的东西)谢谢 最佳答案 一些提示: QuickGraph是一
在我的页面中,我有两个具有相同项目的 Material Design Component 抽屉。一个对于桌面/平板电脑显示是永久性的,另一个对于移动显示是隐藏/模态的。 A
我的抽屉 View 没有显示它在我没有对布局或 MainActivity 进行任何更改之前工作正常,现在当我检查它时什么也没显示 我的 XML 抽屉菜单
我正在尝试使用 jQuery 实现类似抽屉的效果。我的页面由两个重叠的 div 组成,其中顶部的 div 已稍微向一侧移动,露出一些底部的 div。 当我将鼠标悬停在底部的 div 上时,我希望顶部的
根据 latest guidelines对于导航栏,它应该放在屏幕的底部,当带有工具栏的抽屉放在屏幕的顶部时。 考虑到这一点,横幅广告应该放在哪里?根据ad placement guidelines它
我的目标是拥有一个用于在不同路线之间导航的抽屉。如果我们当前在该路线上,我想通过更改抽屉中路线名称的颜色使其看起来更好一些。 我的问题是,每次按下汉堡包菜单时,都会显示一个新的抽屉实例,因为在每条 r
我正在尝试使用一些上边距来实现 Material UI 抽屉,而不是从页面的最顶部开始,但它没有发生,我尝试应用 marginTop 但它没有发生。这是codeSandBox链接Drawer . 如何
我将 vue 与 vue-material 一起使用. 我目前正在使用 md-app 布置我的 Web 应用程序的主要结构。作为 md-[app-]drawer 的根目录, md-[app-]tool
抽屉扩展 Activity 的抽屉 fragment 的第二个 Activity 我有一些问题..在导航 activity2 到 Activity1 的 fragment 时 我试过这段代码..
我构建了一个类似抽屉的“窗口”,它会在用户触摸按钮时出现。抽屉从屏幕底部开始动画并填满整个屏幕。 抽屉实际上是一个UITableViewController,因此抽屉里有一张 table 。 如果我有
这是场景:我有一个按钮 B,还有一个滑动抽屉,拉出时会覆盖整个屏幕。当我拉出屏幕并触摸 B 曾经可见的屏幕时,它的 Action 仍在执行。 我该如何解决这个问题? 我找到了 this线程描述了同样的
我正在使用 React Native 为 Android 开发应用程序。我使用 Wix 的 React Native Navigation 包处理导航,但我有疑问。 现在我的 mi 应用程序在我的手机
我想在 Android 应用程序中添加 Material 抽屉...所以我们需要包含一个工具栏...但是当我们包含工具栏时我得到了错误我的 activitymain_xml 代码是
我是一名优秀的程序员,十分优秀!