Cant call javascript function in php file (Laravel)

Question

Im curently learning laravel with QR code. I use the code that I got from github . Its working fine when I run the html file. But when I add to my code in php file (Laravel) I get some error.

The error:

ErrorException (E_ERROR) Call to undefined function formatName() (View: C:\\xampp\\htdocs\\museumadityawarman\\resources\\views\\topups\\scan_qrcode.blade.php)

The error points out to this part of my view:

<span v-if="camera.id == activeCameraId" :title="formatName(camera.name)" class="active">{{ formatName(camera.name) }}</span>

<li v-for="scan in scans" :key="scan.date" :title="scan.content"><script type="text/javascript">{{scan.content}}</li>

I've tried to change from

{{ formatName(camera.name) }}

To

<script>formatName(camera.name);</script>

This does fix the error message but I still can't get the value.

This is some of Javascript code:

 methods: {
    formatName: function (name) {
      return name || '(unknown)';
    },
    selectCamera: function (camera) {
      this.activeCameraId = camera.id;
      this.scanner.start(camera);
    }   }

Thanks, sorry for my bad english.

Answer 1

You have to put an @ before the {{ formatName(camera.name) }}

@{{ formatName(camera.name) }}

Look at the Laravel doc https://laravel.com/docs/5.6/blade#blade-and-javascript-frameworks :

Since many JavaScript frameworks also use "curly" braces to indicate a given expression should be displayed in the browser, you may use the @ symbol to inform the Blade rendering engine an expression should remain untouched

EDIT:

Since you look like you are using vue.js, you could also use the directive v-text like so :

<span v-if="camera.id == activeCameraId" :title="formatName(camera.name)" class="active" v-text="formatName(camera.name)"></span>