Vue的组件道具价值似乎并不模板
问题描述:
一切都很好,我main.jsVue的组件道具价值似乎并不模板
import User from './components/User.vue'
new Vue({
el: '#user',
render: h => h(User),
data() {
return {
groups: []
}
},
mounted() {
this.getGroups();
},
methods: {
getGroups: function() {
axios.get('http://vagrant.dev/groups')
.then(response => this.groups = response.data)
.catch(error => console.log(error));
}
}
});
User.vue
<template>
<div id="user">
{{groups}} <!-- must be printed but it doesn't seem -->
</div>
</template>
<script>
export default {
name: 'user',
props: ['groups']
}
</script>
和index.html
<div id="user">
<user :groups="groups"></user>
</div>
mi在哪里赌注?
我没有得到任何错误,但我不明白为什么不显示在屏幕
答
你main.js
和index.html
的价值不应该在HTML模板混合和渲染功能。所以,你的main.js
应该是:
```new Vue({
el: '#user',
components: { User },
data() {
return {
groups: []
}
},
...```
-
不要直接重新分配数据的价值,因为Vue公司无法检测财产增加和重新呈现视图。你应该通过
Vue.set
或this.$set
做这样的:this.$set(this, 'groups', response.data)
你可以阅读更多关于如何VUE反应在https://vuejs.org/v2/guide/reactivity.html和Vue.set API:https://vuejs.org/v2/api/#Vue-set
+2
这是不正确的。这只有当你想要在Vue实例数据对象上声明新的属性时,在他的情况下,他已经将'groups'声明为数组,所以它附有观察者,并且该属性是被动的。 –
答
好像你把2 Vue实例在同一个模板中,因为在主文件中,您将模板定义为el: "#user"
,该模板已由User.vue
控制。
在你的index.html添加一个div id="app"
和main.js设置el: "#app"
有在this.getGroups()和getKurbanGroups一个错字?或者他们是不同的功能 –
对不起,应该已经setGroups,多数民众赞成在另一个功能。我修好了它。 – mak