VueJs - V-for Render fail property or method is not defined

Question

I'm facing a weird bug and I can't find why it happens.

I'm trying to make a v-for in my blade view and I have this message :

"[Vue warn]: Property or method "question" is not defined on the instance but referenced during render(...)" And then my page won't render

But "question" is only my v-for alias ! Here is my code :

Blade view :

<section class="clearfix section--faq vue--faq">
<ul class="faq__list list--faq">
     <li v-for"(question,index) in questions" :key="index" class="faq__item card">
        <article class="faq__article">
            <h3 class="title--faq">
            @{{question.titre}}
            </h3>

            <p class="faq__answer">
            @{{question.reponse}}
            </p>
        </article>
    </li>
   </ul>
</section>

VueJS :

if( $('.vue--faq').length ){
  var faq = new Vue({
      el: '.vue--faq',
      data:{
        faqCategories:'',
        questions :'',
        baseUrl : $(".baseurl").text(),
      },

            mounted : function(){
        this.getQuestions();
        this.getCategories();
            },

      methods:{
                getCategories : function(){
                    var self = this;
                    var response = axios.get(self.baseUrl+"/api/faqs/categories")
          .then(function(response){
            self.faqCategories = response.data;
                    });
        },

        getQuestions : function(){
                    var self = this;
                    var response = axios.get(self.baseUrl+"/api/faqs/index")
          .then(function(response){
            self.questions = response.data;
                    });
        },
        },
  });
};

Any Idea why this happens? I've never had any problem why v-for and ajax call before...

Answer 1

The = was missing after the v-for. Putting in the = fixed it!