Question

我看过Jeffory关于Vue.js的系列节目，我正在练习使用vueify编写自己的组件，并使用gulp进行浏览。即使在跟随视频后，我也无法让它正确呈现。我一直收到这个错误。

尝试第一个

错误：

Attribute "list" is ignored on component <alert> because the component is a fragment instance:

观点：

<div id = "app" class = "container">

  <alert :list = "tasks"></alert>

</div>

Componet：

<template>

<div>

    <h1>My tasks

        <span v-show = "remaining"> ( @{{ remaining }} )</span>

    </h1>

    <ul>

        <li :class = "{ 'completed': task.completed }"

            v-for = "task in list"

        @click="task.completed = ! task.completed"

        >

        @{{ task.body }}

        </li>

    </ul>

</div>

</template>



<script>

    export default  {
    props: ['list'],

    computed: {

        remaining: function() {


            return this.list.filter(this.inProgress).length;

            }

        },

        methods: {

            isCompleted: function(task) {

                return task.completed;

            },

            inProgress: function(task) {

                return ! this.isCompleted(task);

            }

        }

    }



new Vue({

    el: '#demo',

    data: {

        tasks: [

            { body: 'go to the store', completed: false },

            { body: 'go to the bank', completed: false },

            { body: 'go to the doctor', completed: true }
        ]
    },


    methods: {

        toggleCompletedFor: function(task) {

            task.completed = ! task.completed;

        }
    }



});

</script>

它为我提供了阅读文档中Fragement Instance部分的链接。我理解的是，如果模板由多个顶级元素组成，则该组件将被分段。所以我把模板中的所有东西都拿出了实际的li标签。有了这个，我仍然得到同样的错误。缺少什么？

已编辑的模板：

    <li :class = "{ 'completed': task.completed }"

        v-for = "task in list"

    @click="task.completed = ! task.completed"

    >

    @{{ task.body }}

    </li>

尝试第二次

相同错误

查看

    <div id ="app">

    <alert>
        <strong>Success!</strong> Your shit has been uploaded!
    </alert>

    <alert type = "success">
        <strong>Success!</strong> Your shit has been uploaded!
    </alert>

    <alert type = "error">
        <strong>Success!</strong> Your shit has been uploaded!
    </alert>

</div>

Main.js

var Vue = require('vue');


import Alert from './componets/Alert.vue';


new Vue({
    el: '#app',

    components: { Alert },

    ready: function() {

        alert('Ready to go!');
    }
});

Alert.Vue

<template>
    <div>

     <div :class ="alertClasses" v-show = "show">

         <slot></slot>

         <span class = "Alert_close" @click="show = false">X</span>
     </div>

    </div>
</template>



<script>

    export default  {

            props: ['type'],

            data: function() {

                return {
                    show: true
                };
            },

            computed: {
                alertClasses: function () {
                    var type = this.type;
                    return{

                        "Alert": true,
                        "Alert--Success": type == "success",
                        "Alert--Error": type == "error"
                    }
                }
            }

    }

</script>

Answer 1

最重要的节点版本，gulp和vueify的重新安装最终成为了解决方案。

Laravel Vue.js片段组件

1 个答案: