How to display data in template from Vue.extend?

Question

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?

I am trying to get data from function in Vue.extend and then to display it's content in template — Dmitry Bubnenkov
– Dmitry Bubnenkov, Commented Feb 16, 2016 at 13:50

sparkyspider · Accepted Answer · 2020-07-21 10:14:56Z

1

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.

edited Jul 21, 2020 at 10:14

sparkyspider

13.5k11 gold badges98 silver badges135 bronze badges

answered Feb 16, 2016 at 15:03

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Dmitry Bubnenkov Over a year ago

and what I should write at html? If it's component should I call it like {{guestContent.foo}}. And could you explain what this code will do without return?

Dmitry Bubnenkov Over a year ago

data is only declaration and attributes in it can't be assigned in data function? And what about methods? Can I assign attributes from it to data?

Dmitry Bubnenkov Over a year ago

could you add comments, or explain what data, ready() and methods do. I read vue docs, but do not understand how to use them...

Jeff Over a year ago

@user1432751 I got a lot of errors trying to use your fiddle... look at this version jsfiddle.net/7q2t5khn/2 . You can use this.$http to fetch your data in the real one, I just mocked data for the fiddle

Jeff Over a year ago

@user1432751 even better, use a separate html block for templates: jsfiddle.net/7q2t5khn/3

|

Collectives™ on Stack Overflow

How to display data in template from Vue.extend?

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related