Vue: Depo bileşenle nasıl kullanılır?

Question

// mağaza

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 
    } 
    } 
} 

// bileşen

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' 
    }) 
} 

// görünüm

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

// hata

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

Sen Vuex devlet Alıcılar haritalama ve eylem doğru. Sorununuz, hata mesajınız başka bir şeydir ...

Bileşen şablonunuzda, kök öğesinde v-for yönergesini kullanamazsınız.

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

** * Sabit şablon etiketinde yazım hatası **

: Bunun yerine bu şekilde yapmak

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

: En bileşeni birden çok kök unsurları olabilir çünkü Örneğin bu izin verilmez