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属性是一个必须返回应用数据的函数。如果您没有返回任何内容，该组件将不会有任何数据。

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

1 个答案: