为了账号安全,请及时绑定邮箱和手机立即绑定

Vue.js 组件:Props 作为对象不适用于 x-template

Vue.js 组件:Props 作为对象不适用于 x-template

HUWWW 2023-01-06 09:27:41

为了简化 Vue 组件的标记,我尝试使用一个对象作为道具。


当按照组件基础知识的代码示例中的描述定义组件的模板时,Vue.js一切正常。但是尝试将模板定义为 x 模板时,我收到一条错误消息,无法读取未定义的属性“标题”。


这是代码:


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

    }

});

是否无法访问 a 中的对象属性,x-template或者我的代码有问题?


查看完整描述

1 回答

?
斯蒂芬大帝

TA贡献1561条经验 获得超7个赞

两件事情:

  • 将 x-template 放在你的 app div 之外。vue要把div里面的内容全部替换掉,这样模板就丢失了

  • postComponent应该template用一个选择器来引用,所以#post-template而不是post-template

这是它的工作演示:https ://jsfiddle.net/vzj5g2sn/


查看完整回答
反对 回复 2023-01-06
  • 1 回答
  • 0 关注
  • 14 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信