0
我已經觀看了Jeffory的Vue.js系列文章，並且正在嘗試使用vueify和browserify編寫我自己的組件。即使在跟隨視頻後，我也無法設法正確呈現它。我不斷收到這個錯誤。Laravel Vue.js片段組件
TRY NUMBER ONE
錯誤：
Attribute "list" is ignored on component <alert> because the component is a fragment instance:
的視圖：
<div id = "app" class = "container">
<alert :list = "tasks"></alert>
</div>
的及部件：
<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 :class = "{ 'completed': task.completed }"
v-for = "task in list"
@click="task.completed = ! task.completed"
>
@{{ task.body }}
</li>
TRY二號
同樣的錯誤
查看
<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>