Laravel5.4和Vue2.0開發

記錄Laravel5.4和Vue2.0開發遇到的坑。

1、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"

2、Vue + ElementUI 後臺

Vue + ElementUI 後臺管理系統項目心得（一）