Laravel5.4和Vue2.0开发

记录Laravel5.4和Vue2.0开发遇到的坑。

一、Vue组件href和src属性

在vue组件中，不能直接使用HTML的属性<a href="http://www.baidu.com">baidu</a>，否则会报错，<img src="myimg.jpg">，需要使用Vue的特殊绑定写法 v-bind:class,v-bind:src：

// 参数拼接
 <a :href="'/user/' + comment.user_id">

 
<img width="36px" class="media-object" :src="comment.user.avatar">


报错：

评论Comments.vue组件文件：

<template>
        <div class="row">
            <div class="col-md-8 col-md-offset-1">
                <div class="panel panel-default">
                    <div class="panel-heading">
                       评论数：{{ count }}
                    </div>

                    <!-- 评论列表 -->

                    <div class="panel-body">
                       <div v-if="comments.length > 0">
                            <div class="media" v-for="comment in comments">
                                <div class="media-left">
                                    <a :href="'/user/' + comment.user_id">
                                    <!-- 注意：这里的图片src，href 需要使用Vue中的资源特殊写法，否则编译不过去 -->
                            
        
<img width="36px" class="media-object" :src="comment.user.avatar">

                                </a>

                                </div>
                                <div class="media-body">
                                <h4 class="media-heading">{{ comment.user.name }}</h4>
                                {{ comment.content }} <span class="pull-right">{{ comment.created_at }}</span>
                                </div>
                            </div>
                       </div>
                   </div>

                    <!-- Modal Actions -->
                    <div class="modal-footer">
                        <textarea class="form-control" rows="5" name="content" v-model="content"></textarea>
                        <button type="button" class="btn btn-primary" @click="store">评论</button>
                    </div>

                </div>
            </div>
        </div>
</template>

<script>
    export default {
        // 为父组件传递到子组件的属性值，子组件使用props方法接收，model为question_id或answer_id
        props:['type', 'model', 'count'],

        // 模型绑定数据
        data(){
            return {
                content : '',
                comments :[],
            }
        },
        // mounted 方法为钩子，在Vue实例化后自动调用
        mounted() {
            axios.get('/api/' + this.type + '/' + this.model + "/comments", {
            }).then((response) => {
               this.comments = response.data;
            })
                /*
                 测试方法
                axios.get('/api/article/test', {
                }).then((response) => {
                    console.log(response.data);
                })
                */
        },
        methods:{
            getComments(){
                axios.get('/api/' + this.type + '/' + this.model + "/comments", {
                }).then((response) => {

                    console.log(response.data);

                    this.comments = response.data;

                })
            },
            store(){

            }
        }

    }
</script>

vue组件属性中字符串如何拼接变量？

v-for v-bind:id="$index" 绑定ID错误示例：

I know it's possible to add v-bind:value attributes to <option> tags in a v-for loop, however, I'm looping through something like this:

<div v-bind:id="mobile-nav-display-$index" 
   v-for="item in mobileSubMenuItems">

I'm getting an id="NaN" . Any ideas?

正解：

v-bind:id=" 'mobile-nav-display-' + $index"

二、Vue + ElementUI 后台

Vue + ElementUI 后台管理系统项目心得（一）