laravel 刀片视图中的 Vue.js 冲突

Question

我在一个刀片视图中有两个相同的组件。 但是问题是vue组件中的function是冲突的。

我制作了 vue 组件来上传文件，但是当我想使用第二个组件时，会触发第一个组件中的 function。

如何防止 vue 组件中的 2 个相同功能发生冲突？

我有两个这样的组件：

<uploadfile
key="comp100"
:user_data="{{ Auth::user()->toJson() }}"
store_path="/users/{{ Auth::user()->username }}/settings/email_backgrounds"
:store_route="'settings.project_email'"
:size="1000"
fillmode="cover"
></uploadfile>

和这个：

<uploadfile
key="comp200"
:user_data="{{ Auth::user()->toJson() }}"
store_path="/users/{{ Auth::user()->username }}/settings/email_backgrounds"
:store_route="'settings.project_email'"
:size="1000"
fillmode="cover"
></uploadfile>

这是我的组件：

<template>
   <div class="vue-wrapper">
      <FlashMessage position="right top"></FlashMessage>
      <div v-if="loading" class="lds-dual-ring"></div>
      <div class="field">
         <div class="control">
            <label class="button main-button action-button m-t-20" for="uploadFiles"><span style="background-image: url('/images/icons/upload.svg')"></span>Kies bestand</label>
            <input type="file" name="uploadFiles" id="uploadFiles" class="dropinput" @change="selectFile">
         </div>
      </div>
   </div>
</template>

<script>

import { fb } from '../../firebase.js';

export default {
  data() {
   return {
      fileObject: {
         filePath: null,
         url: null,
         file: null,
         resizedPath: null
      },
      loading: false
   };
  },

  mounted() {
   console.log(this.size)
   console.log(this.fillmode)
  },

  props: [
   'user_data',
   'store_path',
   'store_route',
   'size',
   'fillmode'
  ],

  methods: {
    selectFile(event)
    {
      var file = event.target.files[0];

        this.fileObject.file = file
      this.fileObject.filePath = this.store_path + '/' + file.name
      this.fileObject.resizedPath = this.store_path + '/resized-' + file.name

      if(file.type == 'image/png' || file.type == 'image/jpeg')
      {
         this.uploadFile(this.fileObject)
      } else {
         this.flashMessage.success({
           title: 'Oeps!',
           message: 'De afbeelding moet een png of een jpeg zijn!',
           blockClass: 'success-message'
        });
      }

    },
   uploadFile(fileObject)
   {
      var vm = this
      console.log(fileObject)
      var storageRef = fb.storage().ref(fileObject.filePath)
      var uploadTask = storageRef.put(fileObject.file)

      this.loading = true

      uploadTask.on('state_changed', function(snapshot){
         var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      },function(error) {

      }, function() {
         var resizeImage = fb.functions().httpsCallable('resizeImage')
         resizeImage({filePath: fileObject.filePath, contentType: fileObject.file.type, watermark: false, size: vm.size, fit: vm.fillmode}).then(function(result){
            var downloadRef = fb.storage().ref(fileObject.resizedPath);
            downloadRef.getDownloadURL().then(function(url){
               fileObject.url = url
               vm.loading = false
               vm.storeImage(fileObject)
            }).catch(function(error){
               console.log(error)
            })
         }).catch(function(error){
         });
      });
   },
   storeImage(file)
   {
      axios.post('/api/app/store_file', {
         api_token: this.user_data.api_token,
         user: this.user_data,
         file: file,
         storeRoute: this.store_route
      }).then((res) => {
         location.reload()
      }).catch((e) => {

      });
   }
 }
}
</script>

Answer 1

根据 Laravel 文档，您可以使用 @ 符号通知刀片 JavaScript 将使用此表达式：

@{{ name }}

或者您可以使用 @verbatim 指令包装大块模板：

@verbatim
    <div class="container">
        Hello, {{ name }}.
    </div>
@endverbatim 

刀片和 JavaScript 框架

Answer 2

只需为您的组件添加关键属性

<component1 key="comp100"></componenet/>
<component1 key="comp200"></componenet/>