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在哪里赌注？

我没有得到任何错误，但我不明白为什么不显示在屏幕

来源

2017-09-23 mak

有在this.getGroups（）和getKurbanGroups一个错字？或者他们是不同的功能 –

对不起，应该已经setGroups，多数民众赞成在另一个功能。我修好了它。 – mak

你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

来源

2017-09-23 11:13:58 imcvampire

这是不正确的。这只有当你想要在Vue实例数据对象上声明新的属性时，在他的情况下，他已经将'groups'声明为数组，所以它附有观察者，并且该属性是被动的。 –

好像你把2 Vue实例在同一个模板中，因为在主文件中，您将模板定义为el: "#user"，该模板已由User.vue控制。

在你的index.html添加一个div id="app"和main.js设置el: "#app"

来源

2017-09-24 08:41:02 Tomer

Vue的组件道具价值似乎并不模板

回答

相关问题