vue @click parameter not defined

Question

What I am doing wrong

I have this:

<stepTitle number=1 @click.native="setStep(number)"  :class=" step === 1 ? 'active' : 'un-active' " title="Let's get started"/>

then in the methods:

methods: {
        setStep: function (event) {

            // some code
        }
    }

and I get this error:

[Vue warn]: Property or method "number" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Here is the file

<template>
    <div id="app">
        <stepTitle number=1 @click.native="setStep(number)"  :class=" step === 1 ? 'active' : 'un-active' " title="Let's get started"/>
        <section-container></section-container>
        <stepTitle number=2  @click.native="setStep(number)" :class=" step === 2 ? 'active' : 'un-active' " title="PICK DATE & TIME"/>
        <section-container></section-container>
        <stepTitle number=3  @click.native="setStep(number)" :class=" step === 3 ? 'active' : 'un-active' " title="LOGIN/REGISTER"/>
    </div>
</template>

<script>
    /* eslint-disable no-console */
    import stepTitle from './components/stepTitle.vue'
    import sectionContainer from './components/sectionContainer'

    export default {
        name: 'app',
        components: {
            stepTitle,
            sectionContainer
        },
        data: function () {
            return {
                count: 0,
                step: 1
            }
        },
        methods: {
            setStep: function (event) {

                // some code
            }
        }


    }
</script>


<style>
    @import 'https://fonts.googleapis.com/css?family=Titillium+Web:300,400';
</style>

Can we see your whole component? What's your data field look like? — Jim B.
– Jim B., Commented Nov 30, 2018 at 22:50
Number is a property of another component?... Other sleptitle is other component, to you get value, create an props, type function. — Hamilton Gabriel
– Hamilton Gabriel, Commented Nov 30, 2018 at 22:58

Decade Moon · Accepted Answer · 2018-11-30 23:14:36Z

1

Is number a prop of <stepTitle> component? number is evaluated within the context of the parent component, not <stepTitle>; number is not defined on the parent component.

Since you've hard-coded the number prop, just do the same for the click handler:

<stepTitle number=1 @click.native="setStep(1)"/>
                                           ^

Here's a more programmatic way of doing it to remove as much duplication as possible in the template:

data() {
  return {
    steps: [
      "Let's get started",
      "PICK DATE & TIME",
      "LOGIN/REGISTER",
    ],
    step: 0,
  };
}

<template v-for="(title, i) of steps">
  <stepTitle
    @click.native="setStep(i)"
    :class="step === i ? 'active' : 'un-active'"
    :title="title"
    :number="i + 1"   (Not sure if number is actually a prop; omit if necessary)
  />
  <section-container v-if="i !== steps.length - 1"/>
</template>

edited Nov 30, 2018 at 23:14

answered Nov 30, 2018 at 22:58

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

matirials Over a year ago

I was trying to define number once and then use 'number' instead of hard-coding it

Decade Moon Over a year ago

But you are hard coding it? I think what you mean is you don't want to duplicate the number across the props of the component; in this situation it isn't helpful. You can't define "local variables" within the template. Either define all data describing every <stepTitle> in code then render it out using v-for (overkill IMO), or do what I suggested.

matirials Over a year ago

Yea it's is true no need for complications.

nicktu12 · Accepted Answer · 2018-11-30 22:51:57Z

1

You want your variable number to live in your component's data.

Vue.Component('matirials-component', {

  data: function() {
    number: 1
  }

  // the rest of your component code
})

We have now defined the variable number on the Vue instance.

answered Nov 30, 2018 at 22:51

nicktu12

1194 bronze badges

Comments

TJ Weems · Accepted Answer · 2018-11-30 23:03:30Z

unless number is a property of another component you should not define that it in the element but rather in your data object. If it is a property of another component you would have it like :number="number"

<template>
    <div id="app">
        <stepTitle @click.native="setStep(number)"  :class=" step === 1 ? 'active' : 'un-active' " title="Let's get started"/>
        <section-container></section-container>
        <stepTitle  @click.native="setStep(number + 1)" :class=" step === 2 ? 'active' : 'un-active' " title="PICK DATE & TIME"/>
        <section-container></section-container>
        <stepTitle  @click.native="setStep(number + 2)" :class=" step === 3 ? 'active' : 'un-active' " title="LOGIN/REGISTER"/>
    </div>
</template>

in your script number would be defined a default value of 1

data() {
 return {
  number: 1,
 }
}

Collectives™ on Stack Overflow

vue @click parameter not defined

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related