CODEWITHSUNDEEP
vue.js
Dmitry Bubnenkov
Dmitry Bubnenkov

Reputation: 9869

How to display data in template from Vue.extend?

Here is my code:

   var guestContent = Vue.extend({
       template: `
           <p>Guest content</p>
       `,
       data: function () {
           return {
              qs: getQuestionsContent();  // here I would like to get in qs data from function          
           }    
       }
   });

Here is my App.js:

    App = new Vue ({ /
        el: '#app',
        data: {
            topMenuView: "guestmenu",
            contentView: "guestcontent",
        }
    });

I need to display qs instead of Guest content and do for example v-for or some kind of other iteration. How can I do it?

Why:

    var guestContent = Vue.extend({
        template: `
            <p>Guest content</p>
            <p>{{foo}}</p> // foo not display
        `,
        data: function () {   
            foo: "dddddddddd";
        }
    });

Why is this not working?

Upvotes: 0

Views: 3058

Answers (1)

Jeff
Jeff

Reputation: 25221

Try something like this:

html

    <body>
      <guest-content></guest-content>
    </body>

    <template id="guest-content-template">
    Guest Content
      <ul>
        <li v-for="question in questions">
      {{question}}
        </li>
      </ul>
    </template>

js

    var guestContent = Vue.extend({
    template: "#guest-content-template",
        data: function (){
          return {
             questions: []
          }
        },
        ready(){
            this.getQuestionsContent();
        },
        methods:{
            getQuestionsContent(){
                this.questions = [
                    "Why?",
                  "What?",
                  "When?"
                ];
            }
        }
    });
        
    Vue.component('guest-content',guestContent);
        
    new Vue({
      el:'body'
    });

Anything in a {{}} is assumed to be within the current Vue scope, so you just use foo or questions not guestContent.foo.

The data attribute is a function that has to return the data for the app. If you don't return anything, the component wont have any data.

Upvotes: 1

Related Questions