道具在Vue上没有定义
道具在Vue上没有定义
提问于 2019-08-26 16:49:00
HTML将道具传递给Vue标记，不存在值。即使我试图打印出挂载，创建，未定义的打印。
Vue正在Django服务器上运行。所以我改变了分隔符，打印了应用程序，但是没有打印出来。
HTML代码
<radio-input :radio-content="personal"></radio-input>Vue码
radioInput = new Vue({
props: ["radioContent"],
template:
'<label>\n' +
' <input type="radio" :name="name" :value="value" :v-model="v_model" :required="required">\n' +
' <span>${ radioContent }</span>\n' +
'</label>\n',
delimiters: ['${', '}'],
el: 'radio-input',
data: {
name: 'A1_P1_S1_B0',
value: 'personal',
v_model: 'A1P1S1Q',
required: true,
}
});预期结果是"radioButton +‘个人’文本“。但是“个人”文本没有被打印出来。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-08-27 08:44:14
因为personal不是父级数据中的变量，尽管它是传递给<radio-input/>组件的静态值。
要传递静态道具，不需要
binding colons :someProp。当您使用它的基本v-bind:someProp时，Vue组件将在其data中查找someProp，或者尝试将其视为像Number、Boolean或Array这样的javascript表达式，而不是作为要传递的静态文本。
将组件的HTML代码更改为：
<radio-input radio-content="personal"></radio-input>--基于代码片段和注释的更新-：好的！这里有几件事
- Vue中的
props是从父级传递到子级的东西(考虑它是一种通信方式，父->子对象是Vue组件或实例，而不是纯HTML)。 - 为什么不在这里工作，：您只有一个
<radio-input/>的Vue实例，它是某种父级的，所以在它上定义prop是没有意义的，因为没有父Vue可以传递它。Read Some More - 在这种情况下，您可以完全删除
prop和绑定值，并直接从您定义的数据属性value中使用personal文本，如果需要的话。
<html>
<head>
</head>
<body>
<radio-input></radio-input>
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script>
radioInput = new Vue({
template: '<label>\n' +
' <input type="radio" :name="name" :value="value" :v-model="v_model" :required="required">\n' +
' <span>${ value }</span>\n' +
'</label>\n',
delimiters: ['${', '}'],
el: 'radio-input',
data: {
name: 'A1_P1_S1_B0',
value: 'personal',
v_model: 'A1P1S1Q',
required: true,
}
});
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57661915
复制相关文章
相似问题
腾讯云开发者
