我似乎无法将 Vue 数据从内联模板传递到 Vue 组件。
我收到了这个错误:
vue.min.js: Uncaught TypeError: Cannot read property 'type' of undefined
下面是我正在使用的示例代码:
Vue.component('data-item', {
props: ['food'],
template:"<li>{{food}}</li>"
})
var content = new Vue({
el: '#content',
data: {
value: 'hello value!'
}
})
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="content">
<!-- this works
<ol>
<li>{{value}}</li>
</ol>
-->
<!-- passing data from vue instance to component doesn't work -->
<ol>
<data-item v-bind:food="value" inline-template></data-item>
</ol>
</div>
最佳答案
您正在尝试使用 inline-template
而不包含内联模板。 inline-template
将组件的 template
替换为其 DOM 节点内的任何内容;你得到 undefined
因为它是空的。
如果你想使用内联模板:
Vue.component('data-item', {
props: ['food'],
template: "<li>This will be ignored in favor of the inline-template: {{food}}</li>"
})
var content = new Vue({
el: '#content',
data: {
value: 'hello value!'
}
})
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="content">
<ol>
<data-item v-bind:food="value" inline-template>
<li>I am the inline template: {{food}}</li>
</data-item>
</ol>
</div>
如果您想使用 data-item
的"template",只需不要在元素上包含 inline-template
即可:
Vue.component('data-item', {
props: ['food'],
template:"<li>I am the component template: {{food}}</li>"
})
var content = new Vue({
el: '#content',
data: {
value: 'hello value!'
}
})
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="content">
<ol>
<data-item v-bind:food="value">
I am the contents of the DOM node, which will be
replaced by data-item's template.
</data-item>
</ol>
</div>
关于javascript - 无法将 Vue 数据传递给 Vue 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54693398/