我想在我自己的sass文件中使用一些现有的 Vuetify 类，但我似乎无法弄清楚如何去做。我有一个带有最新 Vue/Vuetify 的 Vue-CLI3 项目，并有以下代码：
main.sass
@import '~vuetify/src/styles/styles.sass'
.myTest
@extend .mr-1
@extend .shrink
我也有vue.config.js正确引用sass/scss文件的设置：
export default {
css: {
loaderOptions: {
sass: {
data: `@import "path/to/main.sass"`
},
scss: {
data: `@import "path/to/main.scss";`
},
}
}
}
当我编译时，我得到The target selector was not found，它指向.mr-1和.shrink。我这样做不正确吗？
我main.sass文件中的所有其他 CSS 都按预期工作，所以我相信接线是正确的。
我有以下商店。
我的商店.vue
export default {
namespaced:true,
state: {
data: [],
}
// actions, mutations, etc
}
我想知道新数据何时到达商店。
MyOtherVueFile.vue
export default {
computed: {
getFoo() {
return this.$store.state.MyStore.data;
},
},
watch: {
getFoo(newValue, oldValue) {
console.log(`New ${JSON.stringify(newValue)}`);
console.log(`Old ${JSON.stringify(oldValue)}`);
}
},
}
但是控制台总是将新旧数据显示为同一个对象。这是这样做的正确语法吗？
仅供参考 - 我需要捕获何时将新项目添加到 vuex 存储数据中，因为我将它们直接添加到 OpenLayers 地图中。
使此功能适用于myVal的正确语法/钩子是什么？
我的代码如下所示：
<v-item-group v-model="myVal" ...
import { mapActions, mapGetters } from 'vuex';
export default {
computed : {
...mapActions({
myVal: 'myModulePath/setMyVal'
}),
...mapGetters({
myVal: 'myModulePath/getMyVal'
}),
},
}
商店看起来像：
actions: {
setMyVal({commit}, value){commit('someMutation',value);}
getters: {
getMyVal: state => { return state.myVal;}
我不确定如何接线，以便“设置器”工作并且错误消息消失。
我也试过了，但无济于事：
...mapState('myModulePath', ['myVal'])
我在我的 vue 项目中使用了materialdesignicons。
require ('../node_modules/@mdi/font/css/materialdesignicons.min.css);
Vue.use(Vuetify, {iconfont:'mdi'});
我有一些动态创建的图标：
<v-icon>{{ some-mdi-file }}</v-icon>
当我通过 (npm run build) 构建生产时，出现以下错误：
asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
img/materialdesignicons-webfont.someHash.svg (3.77 MiB)
该文件大小很大，因为它包含每个图标，无论是否正在使用。有没有办法通过仅打包所使用的特定图标来缩小文件大小。我应该使用不同的包吗？警告：该项目是离线托管的，因此我需要将字体直接包含在我的项目中。
我查看了 vue-material-design-icons，但看起来它可能不适用于动态图标名称，并且它没有说明整体文件大小/性能。
我也看过这里，但单击“尺寸警告”链接会将我带到一个页面，其中 Vue 部分未填写 https://dev.materialdesignicons.com/getting-started/webfont
我很好奇是否可以在以下情况下使用 orElseThrow() ，或者是否有更多 Java 8 方法来执行相当于 1-liner 的操作？
Collection<Foo> foo = blah.stream().filter(somePredicate).collect(Collectors.toList());
if (foo.isEmpty()) {
throw new Exception("blah");
}
我的菜单和菜单按钮有以下代码。我正在使用Vue CLI 3和Vuetify
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
...
<v-navigation-drawer fixed app v-model="drawer">
<MyMenu/>
</v-navigation-drawer>
<v-toolbar fixed app>
<v-toolbar-title class="headline text-uppercase">
<v-toolbar-side-icon @click.stop="drawer = !drawer"/>
</v-toolbar-title>
</v-toolbar>
当计算机处于联机状态时，该代码非常有用。但是，当计算机脱机时，菜单按钮图标不会显示。而是将其替换为文本“ MENU”。我已经研究过通过npm安装（vue-material-design-icons，material-design-icons和material-design-icons-iconfont），但是在计算机脱机时没有任何运气可以显示图标。我不确定是否有一种我不知道的特殊方式将其连接在一起。谁能提供有关如何解决此问题的见解？
我有一个 v-expansion-panel-header，其中包含一个 v-checkbox。如果我单击该复选框，该复选框不会选中/取消选中。相反，扩展面板会打开/关闭。如何允许复选框工作并仅在单击提供的默认图标时才打开面板？
我尝试在 v 复选框上使用 @click.stop 和 @click.native.stop、@click.capture、@change.stop 等，但它不起作用。
<v-expansion-panels>
<v-expansion-panel>
<v-expansion-panel-header>
<v-checkbox v-model="checkbox" label="MyCB" @click.stop />
</v-expansion-panel-header>
<v-expansion-panel-content>
Lorem ipsum dolor.
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
我有一个 vuetify 选项卡组件，其中包括一个菜单和许多不同的选项卡，这些选项卡可以以随机顺序显示。看起来 v-tab 切换是通过基于索引来工作的。如何通过密钥/唯一 ID 将 vuetify v-tab 切换到正确的选项卡？
例子：
<v-tabs v-model="tab">
<v-tab href="#tab-myUniqueKeyOne">TEST ONE</v-tab>
<v-menu>
<template v-slot:activator="{ on }">
<v-btn text v-on="on">DROPDOWN_TAB</v-btn>
</template>
<v-list>
<v-list-item @click="changeToTab('tab-foo')">Foo</v-list-item>
<v-list-item @click="changeToTab('tab-bar')">Bar</v-list-item>
</v-list>
</v-menu>
<v-tab href="#tab-myUniqueKeyThree">TEST THREE</v-tab>
<v-tab href="#tab-myUniqueKeyTwo">TEST TWO</v-tab>
</v-tabs>
<v-tabs-items v-model="tab">
<v-tab-item value="tab-foo">My Foo</v-tab-item>
<v-tab-item value="tab-baz">Some Hidden Tab</v-tab-item>
<v-tab-item value="tab-myUniqueKeyTwo">Two</v-tab-item>
<v-tab-item value="tab-bar">My Bar</v-tab-item>
<v-tab-item value="tab-myUniqueKeyThree">Three</v-tab-item>
<v-tab-item value="tab-myUniqueKeyOne">One</v-tab-item>
</v-tabs-items>
data: () => {
tab: null,
}
methods: {
changeToTab(tab) {
this.tab = tab;
}
}
我想在 v-data-table 中通过标题拖动列。我已经使用指令/sortablejs 取得了很大的进展，但我无法弄清楚以下内容：
任何帮助/见解将不胜感激！
我有一个此设置的代码笔： https://codepen.io/uglyhobbitfeet/pen/NWWKVza
Codepen 最重要的部分是：
<v-data-table v-sortable-table
和
directives: {
'sortable-table': {
...
}
}
当外部侦听器通知我特定值时，我想以编程方式选中 v-data-table 中的一行。
例如，这里是一个 Vuetify 可选择表：https ://vuetifyjs.com/en/components/data-tables#selectable-rows
在示例中，如果在实例化表及其数据后向我传递“Gingerbread”的值，我将如何以编程方式选择相应的行？