Laravel 5.4 和 Vue.js 2.0 发出的值而不是错误的实例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43533157/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Laravel 5.4 and Vue.js 2.0 Emitted value instead of an instance of Error
提问by Rbex
I'm having hard time on this.
我很难做到这一点。
My specific error is on this code: If I'll try to remove it everything works but I need to display the data columns. I don't understand why it cause an error.
我的具体错误是在这段代码上：如果我尝试删除它，一切正常，但我需要显示数据列。我不明白为什么它会导致错误。
<select>
<option v-for="column in columns">{{ column }}</option>
</select>
My app.js
我的 app.js
import Vue from 'vue'
import DataViewer from './components/DataViewer.vue'
const app = new Vue({
el: '#app',
components: {
DataViewer
},
data: {
}
});
My DataViwer.vue
我的 DataViewer.vue
<template>
<div class="dv">
{{ title }}
</div>
<select>
<option v-for="column in columns">{{ column }}</option>
</select>
</template>
<script type="text/javascript">
import Vue from 'vue'
import axios from 'axios'
export default {
props: ['source', 'title'],
data(){
return {
model: {},
columns: {}
}
},
created(){
this.fetchIndexData()
},
methods: {
fetchIndexData(){
var vm = this
axios.get(this.source)
.then(function(response){
Vue.set(vm.$data, 'model', response.data.model)
Vue.set(vm.$data, 'columns', response.data.columns)
console.log(vm.$data.columns);
})
.catch(function(response){
console.log(response)
})
}
}
}
</script>
My ajax results:
我的ajax结果：
回答by Alexandr Suleymanov
I had the same warn and I found this decision: http://github.com.proxy.parle.co/ElemeFE/element/issues/4137
我有同样的警告，我找到了这个决定：http: //github.com.proxy.parle.co/ElemeFE/element/issues/4137
<el-tag v-for="tag in tags">
=>
<el-tag v-for="(tag, index) in tags" :key="index">
回答by Ali
I faced that error because of a syntax mistakein for loop
the problem was the typo issue in src attribute in img tag!
由于for 循环中的语法错误，我遇到了该错误
，问题是 img 标签中 src 属性中的错字问题！
<img class="m-widget__img" src="{{article.img_thumbnail}}" alt="">
which is totally wrong! it have to be like:
这是完全错误的！它必须是这样的：
<img class="m-widget__img" :src="article.img_thumbnail" alt="">
as you know in these cases we have to bind the parameter to use in that attribute, so first of all search for similar mistakes... hope be helpful
如您所知，在这些情况下，我们必须绑定要在该属性中使用的参数，因此首先搜索类似的错误...希望有所帮助
回答by yukashima huksay
In my case the problem was writing this:
在我的情况下，问题是写这个：
<div :v-if="a>b"/>
<div v-else/>
Instead of this:
取而代之的是：
<div v-if="a>b"/>
<div v-else/>
Afaik you usually get this error when you have made a syntactic error in your template. It has usually nothing to do with the javascript and logic of your application.
Afaik 当您在模板中出现语法错误时，您通常会收到此错误。它通常与应用程序的 javascript 和逻辑无关。
回答by Alireza Aboutalebi
To give Vue a hint so that it can track each node's identity, and thus reuse and reorder existing elements, you need to provide a unique key
要给 Vue 一个提示以便它可以跟踪每个节点的身份，从而重用和重新排列现有元素，您需要提供一个唯一的键
<option v-for="column in columns">{{ column }}</option>
change it to
将其更改为
<option v-for="column in columns" :key="column">{{ column }}</option>
回答by Viktor Hugo Morales
I have the same warn and figure it out that it happen when writing something else outside the loop:
我有同样的警告，并发现在循环之外编写其他内容时会发生这种情况：
This is OK
还行吧
<template>
<table class="responsive-table">
<thead>
<tr>
<th class="no-print" style="width:1%;">
<label>
<input type="checkbox" v-model="selectAll"><span></span>
</label>
</th>
<th style="width:85%">Fecha</th>
<th style="width:14%">Acciones</th>
</tr>
</thead>
<tbody>
<tr v-for="list in messages" :key="list.id">
<td class="no-print" style="width:1%;">
<label><input type="checkbox" name="print_messages[]" v-model="selected" :value="list.id"><span></span></label>
</th>
<td class="view-link">{{list.formatted_date}}</td>
<td></td>
</tr>
</tbody>
</table>
This is NOT OKand through the error "(Emitted value instead of an instance of Error)"
这是错误的，并且通过错误“（发出的值而不是错误的实例）”
<template>
<h1>I AM TRYING TO ADD A TITLE IN HERE</h1>
<table class="responsive-table">
<thead>
<tr>
<th class="no-print" style="width:1%;">
<label>
<input type="checkbox" v-model="selectAll"><span></span>
</label>
</th>
<th style="width:85%">Fecha</th>
<th style="width:14%">Acciones</th>
</tr>
</thead>
<tbody>
<tr v-for="list in messages" :key="list.id">
<td class="no-print" style="width:1%;">
<label><input type="checkbox" name="print_messages[]" v-model="selected" :value="list.id"><span></span></label>
</th>
<td class="view-link">{{list.formatted_date}}</td>
<td></td>
</tr>
</tbody>
</table>
** CHECK THE FIRST LINE AFTER OPENING "template" tag
** 打开“模板”标签后检查第一行
Any clue on this?
这有什么线索吗？
Oh, BTW, I am learning VUEJS brute force style... so be nice ;p
哦，顺便说一句，我正在学习 VUEJS 蛮力风格......所以要好一点；p
