QR-ридер Laravel не использует файл .vue - PullRequest
Новая
       8

QR-ридер Laravel не использует файл .vue

0 голосов
/ 01 июня 2018

Я установил пакет gruhn / vue-qrcode-reader для чтения QR-кодов.

Это мой qrscan.blade.php 

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue</title>
        <link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="app"></div> 
        <script src="{{ mix('js/app.js') }}"></script>
    </body>
</html>

app.js 

require('./bootstrap');

window.Vue = require('vue');

import Vue from 'vue' 
import VueQrcodeReader from 'vue-qrcode-reader'

Vue.use(VueQrcodeReader)

const app = new Vue({
    el: '#app',
    components: { App },
});

и мой vue-qrcode-reader.vue 

<template>
  <QrcodeReader
    :paused="paused"
    @decode="onDecode"
    @init="onInit">
    <div v-if="content" class="decoded-content">{{ content }}</div>

    <LoadingIndicator v-show="loading" />
  </QrcodeReader>
</template>

<script>
import { QrcodeReader } from 'vue-qrcode-reader'
import InitHandler from '@/mixins/InitHandler'
export default {
  components: { QrcodeReader },
  mixins: [ InitHandler ],
  data () {
    return {
      paused: false,
      content: null
    }
  },
  methods: {
    onDecode (content) {
      this.content = content
      this.paused = true
    }
  }
}
</script>

<style scoped>
.
.
.
</style>

А это мой маршрут 

Route::get('/qrscan', 'InventoryItemController@QRscan');

Что я делаю не так?Все, что я получаю, это пустая страница, как будто мой файл .vue не обнаружен моим файлом blade.php.

Ответы [ 3 ]

0 голосов
/ 24 июня 2018

Хорошо, так что есть несколько вопросов.В основном в app.js.Чтобы начать при создании экземпляра vue, вы ссылаетесь на неизвестную переменную App.Я предполагаю, что это ваш корневой компонент, но вы никогда не импортировали его, поэтому Vue не знает об этом.

Во-вторых, вы не импортировали свой компонент в app.js для qr reader - vue-qrcode-reader.vue.Таким образом, он не загружается и не может использоваться.

И в-третьих, Vue никогда не отображается.Зачем?Вы не рендерили его ни при создании экземпляра Vue, ни в файле блейда, ссылаясь на какой-либо компонент Vue.

Так как же может выглядеть исправленный код?app.js: 

require('./bootstrap');

window.Vue = require('vue');

import Vue from 'vue' 
import VueQrcodeReader from 'vue-qrcode-reader'
import VueQrCodeReaderComponent from './components/vue-qrcode-reader.vue'

Vue.use(VueQrcodeReader)
Vue.component('vue-qr-code-reader', VueQrCodeReaderComponent);

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

Теперь ваш экземпляр Vue знает о существовании вашего компонента для чтения QR-кодов, и мы можем сослаться на него в блейд-файле, чтобы отобразить его следующим образом: 

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue</title>
        <link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="app">
            <vue-qr-code-reader></vue-qr-code-reader>
        </div> 
        <script src="{{ mix('js/app.js') }}"></script>
    </body>
</html>

Итак, теперь ваш app.js импортирует vue-qrcode-reader.vue, который является вашим компонентом, привязывает его к тегу html <vue-qr-code-reader> с помощью метода Vue.component, а затем мы можем использовать его в нашем блейд-файле.Не забудьте перекомпилировать ваш javascript и надеюсь, что это поможет:)

0 голосов
/ 24 июня 2018

Вы можете использовать следующий код 

//routers.js
import VueQrcodeReader from './components/VueQrcodeReader.vue';
export default  [
  {
      name: 'VueQrcodeReader',
      path: '/',
      component: VueQrcodeReader
  }

];

//app.js
import Vue from 'Vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import App from './App.vue';
import outroutes from './routers';

const router = new VueRouter({mode:'history', routes: outroutes});
new Vue(Vue.util.extend({router},App)).$mount('#app');
//qrscan.blade.php
<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta https-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
  
        <title>Laravel Vuejs</title>
        <!-- Fonts -->
        <meta name="csrf-token" content="{{ csrf_token() }}">
      <link rel="stylesheet" type="text/css" href="{{ mix('css/app.css') }}">
    </head>
    <body>
        <div id="app">
             
        </div>
    </body>
    <script type="text/javascript" src="{{ mix('js/app.js') }}"></script>
</html>

//you create show.blade.php
@extends('layouts.main')
@section('content')
        <div class="row">
                <div class="col-md-12">
                    <VueQrcodeReader ></VueQrcodeReader >
                </div>
        </div>
@endsection

//you App.vue
<template>
    <div class="container">
        <div>
            <transition name="fade">
                <router-view></router-view>
            </transition>
        </div>
    </div>
</template>
  
<style>
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s
    }
    .fade-enter, .fade-leave-active {
      opacity: 0
    }
</style>
  
<script>
  
    export default{
    }

Вы видите: https://hoanguyenit.com/send-mail-using-laravel-5-4-vuejs.html

0 голосов
/ 01 июня 2018

Запускаете ли вы команду npm run build или yarn build?

Поскольку вам сначала необходимо скомпилировать файл, прежде чем использовать его в навигаторе.Если вы хотите обновлять сборку каждый раз при сохранении файла, используйте npm run watch или yarn watch.

. Ваш файл .vue не будет загружен навигатором, он будет скомпилирован в классический файл javascript.

Надеюсь, это поможет вам.

...