如何在模板中显示来自 Vue.extend 的数据？

Question

这是我的代码：

   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          
           }    
       }
   });

这是我的 App.js:

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

我需要显示 qs 而不是来宾内容，例如 v-for 或某种其他迭代。我该怎么做？

为什么：

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

为什么这不起作用？

Answer 1

尝试这样的事情：

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'
    });

假定 {{}} 中的任何内容都在当前 Vue 范围内，因此您只需使用 foo 或 questions 而不是 guestContent.foo.

data 属性是一个必须 return 应用数据的函数。如果您不 return 任何东西，该组件将没有任何数据。

如何在模板中显示来自 Vue.extend 的数据？

How to display data in template from Vue.extend?

vue.js