CODEWITHSUNDEEP
laravel
Rbex
Rbex

Reputation: 1539

Laravel 5.4 and Vue.js 2.0 Emitted value instead of an instance of Error

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

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

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

        DataViewer
    },
    data: {

    }

});

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

My ajax results:

enter image description here

Upvotes: 4

Views: 9386

Answers (5)

yukashima huksay
yukashima huksay

Reputation: 6238

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.

Upvotes: 0

Ali
Ali

Reputation: 1795

I faced that error because of a syntax mistake in for loop
the problem was the typo issue in src attribute in img tag! 

<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

Upvotes: 1

Viktor H. Morales
Viktor H. Morales

Reputation: 31

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

Upvotes: 0

Alireza
Alireza

Reputation: 1764

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

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

change it to 

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

Upvotes: 0

Alexandr Suleymanov
Alexandr Suleymanov

Reputation: 363

I had the same warn and I found this decision: 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">

Upvotes: 6

Related Questions