通过v-repeat将道具传递给VueJS组件变为空

Question

我对VueJS有点新鲜。我有这个Blade模板，它传递的变量$plans包含[{id:1,name:'1st Plan'},{id:2,name:'2nd Plan'}]：

@extends('layouts.backend')

@section('content')
    @if(Auth::user()->can('edit-plans'))
        <edit-plans
                :workouts="{!! json_encode($plans) !!}"
        ></edit-plans>
    @endif
@endsection

edit.vue内：

<template>
    <workout
        v-repeat="workouts"
    ></workout>
</template>

<script>
    export default {
        props: [
            'workouts'
        ]
    }
</script>

workouts.vue内：

<template>
    <div>{{ id }} :: {{ name }}</div>
</template>

<script>
    export default {
        props: [

        ]
    }
</script>

我在全球注册了这些模板：

Vue.component('edit-plans', require('./components/plans/edit.vue'));
Vue.component('workout', require('./components/plans/workout.vue'));

当我使用yarn进行编译时，我只会在其中添加一行::，但没有id或name值按预期显示在两行上。

当我查看Chrome Vue JS开发人员扩展程序时，我在EditPlans组件中看到了这一点......

...但Workouts组件中没有任何内容。

Answer 1

在 edit.vue 中声明v-for（而不是v-repeat）并传递props。在 workout.vue 中，声明props，以便它们在模板中可用。

<强> edit.vue：

<template>
    <workout
        v-for="workout in workouts" :id="workout.id" :name="workout.name"  :key="workout.id"
    ></workout>
</template>

<script>
    export default {
        props: ['workouts']
    }
</script>

<强> workout.vue：

<template>
    <div>{{ id }} :: {{ name }}</div>
</template>

<script>
    export default {
        props: ['id', 'name']
    }
</script>

演示：

Vue.component('edit-plans', {
	template: "#edit-plans-tpl",
  props: ['workouts']
});
Vue.component('workout', {
  template: "#workout-tpl",
  props: ['id', 'name']
});

new Vue({
  el: '#app',
  data: {
    message: [1,2]
  }
})

<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>

<template id="edit-plans-tpl">
<div>
    <workout
        v-for="workout in workouts" :id="workout.id" :name="workout.name" :key="workout.id"
    ></workout>
</div>
</template>
<template id="workout-tpl">
    <div>{{ id }} :: {{ name }}</div>
</template>

<div id="app">
  <edit-plans :workouts='[{"id":1,"name":"1st Plan"}, {"id":2,"name":"2nd Plan"}]'>
    
  </edit-plans>
</div>

  

更新，每条评论：如果我只想将每个完整的workout传递给孩子而不是对象的每个部分，该怎么办？换句话说，我可以{{ workout.id }} :: {{ workout.name }}

您可以使用v-bind。只需更改 edit.vue ，保持 workout.vue 与上述相同。

<强> edit.vue：

<template>
    <workout
        v-for="workout in workouts" v-bind="workout" :key="workout.id"
    ></workout>
</template>

<script>
    export default {
        props: ['workouts']
    }
</script>

workout.vue：与上述相同。

演示：

Vue.component('edit-plans', {
	template: "#edit-plans-tpl",
  props: ['workouts']
});
Vue.component('workout', {
  template: "#workout-tpl",
  props: ['id', 'name']
});

new Vue({
  el: '#app',
  data: {
    message: [1,2]
  }
})

<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>

<template id="edit-plans-tpl">
<div>
    <workout
        v-for="workout in workouts" v-bind="workout" :id="workout.id"
    ></workout>
</div>
</template>
<template id="workout-tpl">
    <div>{{ id }} :: {{ name }}</div>
</template>

<div id="app">
  <edit-plans :workouts='[{"id":1,"name":"1st Plan"}, {"id":2,"name":"2nd Plan"}]'>
    
  </edit-plans>
</div>

  

更新，每条评论：所以无论如何，我必须声明workout对象中的每个属性？我不能在 workout.vue 中执行props: ['workout']所以我可以{{ workout.id }} :: {{ workout.name }}吗？

您可以在孩子中声明workout道具并将其传递给父母，例如:workout="workout"：

<强> edit.vue：

<template>
    <workout
        v-for="workout in workouts" :workout="workout" :key="workout.id"
    ></workout>
</template>

<script>
    export default {
        props: ['workouts']
    }
</script>

<强> workout.vue：

<template>
    <div>{{ workout.id }} :: {{ workout.name }}</div>
</template>

<script>
    export default {
        props: ['workout']
    }
</script>

演示：

Vue.component('edit-plans', {
	template: "#edit-plans-tpl",
  props: ['workouts']
});
Vue.component('workout', {
  template: "#workout-tpl",
  props: ['workout']
});

new Vue({
  el: '#app',
  data: {
    message: [1,2]
  }
})

<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>

<template id="edit-plans-tpl">
<div>
    <workout
        v-for="workout in workouts" :workout="workout" :key="workout.id"
    ></workout>
</div>
</template>
<template id="workout-tpl">
    <div>{{ workout.id }} :: {{ workout.name }}</div>
</template>

<div id="app">
  <edit-plans :workouts='[{"id":1,"name":"1st Plan"}, {"id":2,"name":"2nd Plan"}]'>
    
  </edit-plans>
</div>

注意：:key="workout.id" added to the loop：此默认模式是有效的，但仅在列表呈现输出不依赖于子组件状态或临时DOM状态时才适用。 （感谢@channasmcs）。