Question

我在这方面很难过。

我的具体错误在于此代码：如果我尝试删除它，一切正常，但我需要显示数据列。我不明白为什么会导致错误。

<select>
        <option v-for="column in columns">{{ column }}</option>
    </select>

我的app.js

    import Vue from 'vue'
import DataViewer from './components/DataViewer.vue'

const app = new Vue({
    el: '#app',
    components: {

        DataViewer
    },
    data: {

    }

});

我的DataViwer.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>

我的ajax结果：

Answer 1

我有同样的警告，我发现了这个决定：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">

Answer 2

要给Vue一个提示，使其可以跟踪每个节点的身份，从而重用和重新排列现有元素，您需要提供一个唯一的键

<option v-for="column in columns">{{ column }}</option>

将其更改为

<option v-for="column in columns" :key="column">{{ column }}</option>

Answer 3

我有同样的警告，并指出在循环外编写其他内容时会发生这种情况：

没关系

<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>

这不行，并显示错误“（（使用值代替错误的实例）”

<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>

**打开“模板”标签后检查第一行

对此有任何线索吗？

哦，顺便说一句，我正在学习VUEJS蛮力风格...所以要很好； p

Answer 4

我因为在for循环中出现语法错误而遇到了该错误
问题是img标签中src属性的拼写错误！

<img class="m-widget__img" src="{{article.img_thumbnail}}" alt="">

这是完全错误的！它必须像：

<img class="m-widget__img" :src="article.img_thumbnail" alt="">

如您所知，在这些情况下，

我们必须绑定要在该属性中使用的参数，所以首先要寻找类似的错误... 希望有帮助

Answer 5

就我而言，问题是这样写的：

<div :v-if="a>b"/>
<div v-else/>

代替此：

<div v-if="a>b"/>
<div v-else/>

Afaik通常在模板中出现语法错误时会出现此错误。通常，它与应用程序的javascript和逻辑无关。

Laravel 5.4和Vue.js 2.0发出的值而不是Error的实例

5 个答案: