Summer Sale! All accounts are 50% off this week.

jeloqim's avatar

undefined constant using Vue

Following this and at minute 4:10 when the author references a variable that is an item of a variable from a Vue instance I get

Use of undefined constant user - assumed 'user'

My code is the the same as in the video:

<div class="results">
        <article v-reapeat="user: users">
            <h2>{{ user.name }}</h2>
        </article>
    </div>

    <script src="//cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.js"></script>

    <script type="text/javascript">

        new Vue({
            el: 'body',

            data: { users: [] },

            ready: function() {
                var client = algoliasearch("---", "---");

                var index = client.initIndex("getstarted_actors");

                index.search('Kevin', function(error, results){

                    this.users = results.hits;
                    
                }.bind(this) );
            }
        });

               
    </script>

Anyone know what the problem is?

0 likes
6 replies
cklmercer's avatar
Level 15

Are you inside of a blade template file? If so you'll need to use @ to tell blade to ignore the code, since blade and vue both use "{{ }}".

<h2>@{{ user.name }}</h2>

Also, there's a typo in the v-repeat directive on your article, and and v-repeat has been replace in the version of VueJs you're using. v1 is still fairly new, so it's possible the cdn was updated after this video was made.

Try using the new v-for syntax instead. It's practically the same.

<article v-for="user in users">
...
15 likes
mikield's avatar

Your erros is because the typo in your v-repeat. Also use better a new way v-for instead of v-repeat :)

<article v-for="user in users">
...
1 like
palak's avatar

@cklmercer : If I use

@{{ user.name }}

It prints {{user.name}} and not the value of it. Do I need to do anything to take care of this.

Here is my form & script. Actually after I receive this value on my php.blade file I want to further processing.

​```

<option v-for="option in options" v-bind:value="option.value">

                                    @{{ option.text }}

</option>

@{{ selected }}

new Vue({

     el: '#usertype',
     data: {
          selected: 1,
          options: [
          {text: 'A', value: 1},
          {text: 'B', value: 2}
          ]
     }       
 })    

​```

Please or to participate in this conversation.