Vue：store with componentの使い方は？

Question

//ストア

export default { 
    state: { 
    aboutModels: [] 
    }, 
    actions: { 
    findBy: ({commit}, about)=> { 
     //do getModels 
     var aboutModels = [{name: 'About'}] //Vue.resource('/abouts').get(about) 
     commit('setModels', aboutModels) 
    } 
    }, 
    getters: { 
    getModels(state){ 
     return state.aboutModels 
    } 
    }, 
    mutations: { 
    setModels: (state, aboutModels)=> { 
     state.aboutModels = aboutModels 
    } 
    } 
} 

//コンポーネント

import {mapActions, mapGetters} from "vuex"; 

export default { 
    name: 'About', 
    template: require('./about.template'), 
    style: require('./about.style'), 
    created() { 
    document.title = 'About' 
    this.findBy() 
    }, 
    computed: mapGetters({ 
    abouts: 'getModels' 
    }), 
    methods: mapActions({ 
    findBy: 'findBy' 
    }) 
} 

//ビュー

<div class="about" v-for="about in abouts">{{about.name}}</div> 

//エラー

vue.js:2532[Vue warn]: Cannot use v-for on stateful component root element because it renders multiple elements: 
<div class="about" v-for="about in abouts">{{about.name}}</div> 

vue.js:2532[Vue warn]: Multiple root nodes returned from render function. Render function should return a single root node. (found in component <About>) 

Answer 1

あなたのVuex状態ゲッターをマッピングしていると、行動を正しくあなたの問題は、エラーメッセージに記載されているとおりです。

コンポーネントテンプレートでは、v-forディレクティブをルート要素に使用できません。

<template> 
    <div> 
     <div class="about" v-for="about in abouts">{{about.name}}</div> 
    </div> 
</template> 

** *固定テンプレートタグのタイプミス**

：代わりに、このようにそれを行う

<template> 
    <div class="about" v-for="about in abouts">{{about.name}}</div> 
</template> 

：あなたのコンポーネントが複数のルート要素を持つことができるので、例えば、これは許可されていません