小编T. *_*ort的帖子

我启用了自定义属性：

Vue.use(Vuetify, {
    options: {
        customProperties: true
    }
});

并尝试通过 CSS 变量使用：

<style>
    .custom{
        color:var(--v-primary-base);
    }
</style>

这是vuetify.js我设置主题的文件：

export default new Vuetify({
    icons: {
        iconfont: 'mdi',
    },
    theme: {
        themes: {
            light: {
                background: '#FFFFFF',
                primary: '#25316A',
                secondary: '#b0bec5',
                accent: '#25316A',
                error: '#E86674',
                orange: '#FF7A0D',
                golden: '#A68C59',
                badge: '#F5528C',
                customPrimary: '#085294',
            },
            dark: {
                primary: '#085294',
            }
        },
    },
})

没有任何主题颜色可通过变量访问。我尝试了很多方法，但没有奏效，也没有抛出错误。任何人都可以请帮助我吗？

我有两个组成部分。父母和孩子。父母根据加载孩子v-if。然后，孩子通过发送事件$emit来告诉父母删除孩子。

简而言之。

家长：

data() {
    return {
        show: false
    }
},
// template: 
<div>
    <div @click="show = !show">Toggle</div>
    <child-component
        v-if="show"
        @close="show = false"
   />
</div>

儿童：

template: 
<div>
    Some Content
    <div @click="$emit('close')">Close</div>
</div>

问题是，当$emit('close')被触发时，将从DOM中删除该子项，但不会从内存中清除该组件。

如果父母使用该toggle按钮删除了孩子，它将从内存中清除孩子。

我也尝试过使用Vuex store，$root.data但这也会导致内存泄漏。

换句话说，似乎如果子级向父级发出信号，则应将其删除，然后将其保留在内存中。但是，如果父母将孩子直接删除（没有孩子的任何信号），则会从内存中删除它...

有什么想法为什么会发生这种情况以及我应该怎么做才能防止这种内存泄漏？必要的是孩子发出将其移除的信号。

[编辑]-在代码笔中进行演示。 https://codepen.io/tomshort5/pen/BaBLXvb

内存快照

通过在某些操作后制作内存快照，可以最好地看到这一点。页面加载时，我们只有一个Vue实例。

单击切换后，将按预期创建VueComponent。

触发通过事件将其删除后，不会从内存中删除VueComponent。与再次单击“切换”进行比较时，它确实显示该组件已从内存中删除。

我的模板中有这个 html：

        <v-file-input
          :label="label"
          accept="image/*"
          prepend-icon="mdi-camera"
          @change="uploadImage"
          hide-details
          outlined
        />

我的组件还有一个名为的 prop current，其中包含一个文本，该文本是当前文件的名称。

当显示组件时，它v-file-input是空的，但我希望它包含当前文件名的名称。我已经尝试过了:value="current"，但v-model="current"没有成功。

我应该怎么办？

我有一个v-data-table，用户可以单击任何行并打开一个对话框。在我的 vuetify 对话框里面是一个数据下拉列表。

我想在用户每次单击一行时过滤此数据，并从对话框内的下拉列表中过滤掉用户单击的内容。

这是我的对话：

       <v-dialog v-model="edit" max-width="1200"  @input="closeDialog()">
            <editCompany :isEdit="true"
                         v-if="showEdit"
                         :company="selected"
                         :adminEdit="true"></editCompany>
          </v-dialog>

您可以看到我正在传递用户单击的表行中的值。

现在，我需要使用传入的值来过滤下拉列表。挂载的事件只运行一次，所以我里面的逻辑只在点击的第一行时触发。

这是我的editCompany模板内的挂载事件：

     mounted: async function () {
        this.filterOutResults(); //this is where i do my filtering and it works
       },

用户点击的每一行都不会触发安装，所以我不能使用它，除非我可以在关闭时卸载对话框。

我找到了如何在对话框关闭时触发事件，但找不到 vuetify 打开事件。

我如何在每次打开对话框时运行一个函数，以便我可以过滤结果，或者如何在每次关闭时卸载对话框，以便每次都可以运行安装的事件？谢谢

我正在使用博客应用Vue.js的前端和Node.js的的后端。

我在前端使用富文本编辑器 ( vue2-editor ) 供用户创建博客内容。我想将该内容存储在数据库 (MySQL) 中并检索它。目前，我存储的任何内容都是纯 HTML。

<p><strong>This is Blog Heading</strong></p><p><br></p><p><u>This is underlined</u></p><p><br></p><p>This is start of the paragraph</p>

从数据库中检索后，它呈现为字符串而不是 HTML

我怎样才能让它正确显示 HTML？

我正在尝试用 Vue.js 做一个多语言站点，但我不知道如何调用 consti18n或如何引用它。我已经尝试过该eventBus选项，但我认为这不是正确的选择。我正在使用vue-router.

导航栏.vue

<template>
    <a v-on:click="changeLocale">EN</a>
</template>
<script>
   export default {
        methods: {
            changeLocale: function() {
                console.log("es");
                i18n.locale = "es";
            }
        }
    };
</script>

主文件

import VueI18n from 'vue-i18n';
import VueRouter from 'vue-router';
import App from './App.vue';
import {routes} from './routes.js';
import {messages} from './i18n.js';

Vue.use(VueRouter);
Vue.use(VueI18n);

const router = new VueRouter({
    routes,
    mode: 'history'
});

const i18n = new VueI18n({
    locale: 'en',
    messages
});

new Vue({
    el: '#app',
    router,
    i18n,
    render: …

您好，我正在尝试扩展默认的 v-data-table 组件以Vuetify避免代码冗余。我的组件很少v-data-table。它的工作原理相同，但表头可能不同。我正在使用v-slots，但如何扩展动态插槽Vuetify？

当我必须将自定义 html 添加到表中的一列（例如action）时，我正在使用：

<v-data-table
   :headers="questionTableHeaders"
   :items="questions.fetchedData"
   class="elevation-1"
   hide-default-footer
   :page.sync="questions.pagination.page"
   :items-per-page="questions.pagination.itemsPerPage"
   :loading="loadingData"
   loading-text="Loading..."
   no-data-text="No data.">

   <template v-slot:item.action="{ item }">
      <v-icon
      small
      class="mr-2"
      title="title"
      @click="clickOnTheItem(item)">
      fas fa-plus
      </v-icon>
   </template>

</v-data-table>

但有时表没有列操作。如何在组件dataTable扩展默认v-data-table组件中准备动态插槽，以确保传递到组件的每个标头都有一个可以在父组件中使用的插槽？

如果我有标题：

[
   {text: "text1", value: "name"},
   {text: "text2", value: "hash"}
]

我可以访问老虎机item.name并且item.hash？

<dataTable :url="examApiUrl" :headers="examTableHeaders">
   <template v-slot:item.name="{ item }"></template>
   <template v-slot:item.hash="{ item }"></template>
</dataTable>

但正如我之前所写，标题可以不同。如何在组件中准备插槽dataTable？

我正在研究 Vuetify.js，我是 Vue 的新手，我参考了这个文档Vuetify Dialogs for create dialog and solution of Matheus Dal'Pizzol 从此链接Open a Vuetify dialog from a component template in VueJS 将其分离到组件. 结果我有子组件作为对话框如下

家长

    <template>
      <v-container fluid>
        <v-row dense>
          <v-col cols="12">
            <v-btn large color="success">Add product</v-btn>
          </v-col>
          <v-col cols="3" v-for="product in products" :key="product.id">
            <v-card class="mx-auto" outlined>
              <v-list-item three-line>
                <v-list-item-content>
                  <v-list-item-title class="headline mb-1">{{product.name}}</v-list-item-title>
                  <v-list-item-subtitle>{{product.title}}</v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
              <v-card-actions>
                <v-btn dark color="cyan" @click.stop="showScheduleForm = true">
                  <v-icon dark>mdi-television</v-icon>
                </v-btn>
                <v-btn color="primary">Detail</v-btn>
              </v-card-actions>
            </v-card>
            <modal-detail v-model="showScheduleForm" :productDetailInfo="product"></modal-detail>
          </v-col>
        </v-row>
      </v-container>
    </template>

    <script> …