小编tig*_*rel的帖子

不知何故，我的 vuetify Snackbar 在 6 秒后消失了我试图阻止它，但我失败了。这就是我的 vue 组件的外观，它基本上是一个带有附加按钮的 Snackbar。

<template>
    <div>
        <v-snackbar
            :timeout="timeout"
            :bottom="'bottom'"
            :right="'right'"
            :auto-height="true"
            v-model="googleAnalyticsSnackbar"
        >
            {{ text }}
             <v-btn flat color="pink">
                 <a href="#">test</a>
            </v-btn>
            <v-btn flat color="pink" @click.native="googleAnalyticsSnackbar = false">yes</v-btn>
            <v-btn flat color="pink" @click.native="googleAnalyticsSnackbar = false">no</v-btn>
        </v-snackbar>
    </div>      
</template>

<script>
    export default {

        mounted() {
            if(this.checkCookieStatus() == false || this.checkCookieStatus() == null) {
                this.googleAnalyticsSnackbar = true;
            }
        },

        data: () => ({
            googleAnalyticsSnackbar: true,
            timeout: 0,
            text: 'foo'
        }),

        methods: {
            acceptCookie() {
                this.$cookie.set('cookie_accept_status', true, 1);
            }, …

我将vuejs与vuetify一起使用，我放置了一个基本的vuetify模板，并尝试更改Color主题，但是Color不会切换。我的控制台没有收到任何错误，并且我的缓存也被清除了。

main.js代码：

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import colors from 'vuetify/es5/util/colors';

Vue.use(Vuetify, {
  theme: {
    primary: colors.indigo.base, // #E53935
    secondary: colors.indigo.base, // #FFCDD2
    accent: colors.indigo.base // #3F51B5
  }
});

const app = new Vue({
    el: '#app',
    // ...
});

这就是我的模板的样子。

    <div id="app">
  <v-app light>
    <v-navigation-drawer
      fixed
      v-model="drawerRight"
      right
      clipped
      app
    >
    </v-navigation-drawer>
    <v-toolbar
      dark
      fixed
      app
      clipped-right
    >
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-spacer></v-spacer>
      <v-toolbar-side-icon @click.stop="drawerRight = !drawerRight"></v-toolbar-side-icon>
    </v-toolbar>
    <v-content>
      <v-container fluid fill-height>
        <v-layout justify-center align-center> …

在我的 api 路由中，我调用此方法，该方法返回包含所有数据的集合。

public function getAllGames()
{
    return $this->game->all();
}

数据看起来像这样

[
    {
        "id": 1,
        "title": "Dragonball",
        "description": "asdasd",
        "image": "db.png",
        "release_date": "2018-03-28",
        "release_status": 0,
        "created_at": "2018-03-12 21:28:49",
        "updated_at": "2018-03-12 21:28:49"
    },
]

我想以 64 进制字符串形式返回图像，而不是图像名称。

我创建了一个帮助程序类，其中包含将图像从路径转换为 ​​Base 64 字符串的方法：

class ImageHelper {

    public static function imageToBase64($path) {
        $type = pathinfo($path, PATHINFO_EXTENSION);
        $data = file_get_contents($path);
        $base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);

        return $base64;
    }

}

现在我不确定是否必须修改集合，以便我的数据看起来像这样：

[
    {
        "id": 1,
        "title": "Dragonball",
        "description": "asdasd",
        "image": "daoisdboi3h28dwqd..", // …

我在 laravel 应用程序中使用 vuetify 框架构建了一个简单的表单。bootstrap.js 已经包含 axios 客户端，但我仍然在提交时收到错误，提示未定义 axios：

[Vue 警告]：“click”事件处理程序出错：“ReferenceError: axios is not defined”

这是新的 Laravel 安装附带的默认 bootstrap.js 文件，我刚刚删除了 jquery：

window._ = require('lodash');
window.Popper = require('popper.js').default;

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

这就是我的 app.js 文件的样子：

import bootstrap from 'bootstrap';

import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

Vue.component('form-component', require('./components/FormComponent.vue')); …