VueJS mustache data binding not working. How can I debug this?

Question

I am trying to render VueJS data strings within HTML tags with VueJS mustaches. However, the strings don't appear to be rendering - the variable values are populating as observed within VueJS dev-tools. Any assistance on determining what must have gone wrong will be appreciated.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Doc Scan</title>

    <!--Bulma CSS-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" />

    <!-- Vue JS Production-->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->

    <!-- Vue JS Dev-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1 class="title is-1">Doc Scanner</h1>
        <div class="file has-name">
            <label class="file-label">
                <input class="file-input" type="file" ref="file" v-on:change="handleFileUpload()">
                <span class="file-cta">
                    <span class="file-icon">
                        <i class="fas fa-upload"></i>
                    </span>
                    <span class="file-label">
                        Choose a file…
                    </span>
                </span>
                <span class="file-name" v-if="file">
                    File is there : {{ filename }}
                </span>
                <span class="file-name" v-else>
                    No file selected
                </span>
            </label>

        </div>

    </div>

    <!--VueJS Script-->
    <script>
        var app = new Vue({
            el: '#app',

            data: {
                file: '',
                filename: '',
            },

            methods: {
                handleFileUpload() {
                    this.file = this.$refs.file.files[0];
                    this.filename = this.file.name;
                    console.log(this.filename)
                }
            }
        })
    </script>
</body>

</html>

This is working for me? I am using this image to upload: https://i.imgur.com/d1HOxKk.png — Matt Oestreich, Dec 15 '19 at 00:07
I executed this code on a CodePen and it worked just fine. Can you please update your post to use a runnable snippet? https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/ or a CodePen or StackBlitz? — Matt U, Dec 15 '19 at 00:08
Thank you for your help. I checked again - when I host this file through Python flask, it seems that the mustaches are not resolving to the data strings. However, it works fine when the HTML is opened directly within the browser. Any thoughts on why this may be happening ? — Bikram Ghura, Dec 15 '19 at 01:02
It seems like the VueJS delimiter was clashing with Python's. Re-defining the delimiter as per this post solved the issue- https://stackoverflow.com/questions/45203736/how-do-i-use-flask-templating-with-vuejss-mustache-syntax. Thank you for your assistance :) — Bikram Ghura, Dec 15 '19 at 01:06
Note: the `` tag does not use and does not need a closing slash and never has in HTML. — Rob, Dec 15 '19 at 02:39

score 1 · Answer 1 · answered Dec 15 '19 at 01:07

1

It seems like the VueJS delimiter was clashing with Python's. Re-defining the delimiter as per this post solved the issue- stackoverflow.com/questions/45203736/…. Thank you for your assistance :)

answered Dec 15 '19 at 01:07

Bikram Ghura

41
3

score 0 · Answer 2 · edited Jul 15 '22 at 02:30

You should rather use vue-cli in order to set up a project easily and to be able to use all the possibilities of vuejs

Then, data must be a function that returns an object.

Take a look at the documentation : https://v2.vuejs.org/v2/guide/components.html

var app = new Vue({
            el: '#app',

            data: function() {
               return {
                file: '',
                filename: '',
               }
             },

            methods: {
                handleFileUpload() {
                    this.file = this.$refs.file.files[0];
                    this.filename = this.file.name;
                    console.log(this.filename)
                }
            }
        })

VueJS mustache data binding not working. How can I debug this?

2 Answers2