如果您在多个元素上使用 v-if，请改用 v-else-if 链接它们。 Laravel + VueJs

Question

第一个问题 - How to create components in a loop?

在我的 Index.vue 中有一个循环

<div v-for="(image, id, index) in images" class="col-md-4">
  <photo :src ="image.src" :symbolId="image.id" :photoId="image.photo_id" :index="index"></photo>
</div>

在我的 app.js 中我注册了一个组件

Vue.component('photo',
   require('./components/Photo.vue')
);

在我的 Photo.vue 中

<template>
    <img v-on:click="replaceImages()" :src="src" class="img-responsive image" :data-symbol-id="symbolId" :data-photo-id="photoId">
<input :name="index" :data-symbol-id="symbolId" :data-photo-id="photoId" 
type="hidden" :value="src">
</template>

<script>
export default {
    name: 'photo',
    props: {
        src: {
            type : String,
            required: true
        },
        symbolId: {
            type: String,
            required: true
        },
        photoId: {
            type: Number,
            required: true
        },
        index: {
            type: Number,
            required: true
        }
    },
}
</script>

但是当 npm 编译它时，我得到一个错误

组件模板应该只包含一个根元素。如果您在多个元素上使用 v-if，请改用 v-else-if 链接它们。

Answer 1

添加一个div代替模板，Vue期望一个包含所有模板的根元素，如果使用如下示例，则vue省略模板标签

<template>
<div>
    <img v-on:click="replaceImages()" :src="src" class="img-responsive image" :data-symbol-id="symbolId" :data-photo-id="photoId">
<input :name="index" :data-symbol-id="symbolId" :data-photo-id="photoId" 
type="hidden" :value="src">
</div>
</template>

var child = {
  template : '<div>Child component</div>'
}
var app = new Vue({
  el:"#app",
  components:{
    child
  },
  data:{
    name:''
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script>
<div id="app">
<child></child>
</div>