0

Firstly I'm Laravel Spark and have successfully integrated into the mix installation so my js is being deployed into app.js already

I am getting errors when I setup a new component for a project;

blade file

@extends('spark::layouts.app')

@section('content')


    <div class="container">
        <!-- Application Dashboard -->
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Sprints</div>

                    <div class="panel-body">

                        <os-sprints></os-sprints>



                          <input type="text" v-model="newSprint"> 
                          <button @click="addSprint">add</button>


                    </div>
                </div>
            </div>
        </div>
    </div>


    <template id="my-sprints">

      <ul class="list-group">

        <li class="list-group-item" v-for="sprint in sprintlist">
          <a :href="'/sprints/' + sprint.id">@{{ sprint.title }} @{{ sprint.id }} </a>
        </li>

      </ul>

    </template>



@endsection

and my js

Vue.component('os-sprints', {

    template: '#my-sprints',

    data() {

        return {
          sprintlist: [],
          newSprint: ''
        };
    },


    created() {
        this.getSprints();
    },

    methods: {


        getSprints() {


          axios.get ('/api/team/sprints')
            .then(response => {
              this.sprintlist = response.data;
            });


        },


        addSprint() {

          alert("hit");


          // this.sprintlist.push(this.newSprintname);
          // this.newSprintname = '';


        },


    }


});

The errors I'm getting in console;

app.js:42229 [Vue warn]: Property or method "newSprint" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

(found in <Root>)
warn @ app.js:42229
app.js:42229 [Vue warn]: Property or method "addSprint" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

(found in <Root>)
warn @ app.js:42229
app.js:42229 [Vue warn]: Property or method "sprintlist" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

(found in <Root>)
warn @ app.js:42229
app.js:42229 [Vue warn]: Invalid handler for event "click": got undefined

I'm getting a sprintlist data fine but even without the text field and button I'm getting errors and my button method never hits.

Any feedback would be greatly appreciated

Chris!

4 Answers 4

3

This type of warning is usually caused by a variable not being defined yet. (I know, not very helpful). What I mean:

  1. You passing a variable from one component A to another component B
  2. While a variable is still being passed (have not reached the desired component B), component B is already being mounted
  3. since a component B is already mounted, it is trying to use a variable that hasn't reached yet (ta da -> a warning)
  4. Then a variable reached, Vuejs reacted and updated the view accordingly

This warning can be avoided by adding a v-if to an element or a wrapper

0

That's because you reference your data object properties and methods of a child component in parent component.

Move
<input type="text" v-model="newSprint"> <button @click="addSprint">add</button>

into your child component's template and you should be fine.

0

Ok I worked it out, I had tried to do what MatWaligora had suggested previously but the issue was I didn't realise I needed a single "parent" within the template. After I changed it to the below I got the functionality working. I'm still getting Vue warning messages as above but the page works.

<template id="my-sprints">

  <div>

    <ul class="list-group">

      <li class="list-group-item" v-for="sprint in sprintlist">
        <a :href="'/sprints/' + sprint.id">@{{ sprint.title }} @{{ sprint.id }} </a>
      </li>

    </ul>


    <input type="text" id="sprinttext" v-model="newSprint"> 
    <button @click="addSprint">add</button>

  </div>


</template>
0

For me it was an extra closing tag in the loop.

<div v-for="(item, index) in items" :key="index">

    <a :href="item.url">{{ item.name }} </a>

    </div> // <- the issue

</div>

Double check all tags if other answers didn't help you.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.