Vue.js组件：作为对象的道具不适用于x-template

问题描述

为了简化Vue组件的标记，我正在尝试将一个对象用于道具。

按照Components Basics — Vue.js上的代码示例中的说明定义组件模板时，一切正常。但是尝试将模板定义为x模板时，出现一个错误，提示无法读取未定义的属性'title'。

这是代码：

<div id="app">

    <script type="text/x-template" id="post-template">

        <div class="blog-post">
          <h3>{{ post.title }}</h3>
          <div v-html="post.content"></div>
        </div>

    </script>

    <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>

</div>

const data = {
    posts: [
        {
            title: "Hello World",content: "Bar"
        }
    ]
};

let postComponent = {
  props: ['post'],template: 'post-template'
}

const vue = new Vue({
    el: '#app',components: {
        'blog-post': postComponent
    },data() {
        return data;
    }
});

是否无法访问x-template中的对象属性，或者我的代码有问题吗？

解决方法

两件事：

将x模板带到应用div之外。 Vue将替换div中的所有内容，这样模板就会丢失
postComponent应该使用选择器来引用template，因此#post-template而不是post-template

以下是其工作示例：https://jsfiddle.net/vzj5g2sn/

javascript vue-component vue.js