Question

我做错了

我有这个：

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

然后在方法中

methods: {
        setStep: function (event) {

            // some code
        }
    }

我得到这个错误：

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

这是文件

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

Answer 1

您希望变量number位于组件的data中。

Vue.Component('matirials-component', {

  data: function() {
    number: 1
  }

  // the rest of your component code
})

我们现在在Vue实例上定义了变量number。

Answer 2

number是<stepTitle>组件的道具吗？ number是在父组件而不是<stepTitle>的上下文中评估的；未在父组件上定义number。

由于您已经对number道具进行了硬编码，因此只需对点击处理程序执行相同的操作即可：

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

这是一种更具编程性的方法，可以在模板中删除尽可能多的重复项：

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>

Answer 3

除非number是另一个组件的属性，否则您不应在元素中而是在数据对象中对其进行定义。如果它是另一个组件的属性，则您将拥有: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>

在您的脚本编号中

将被定义为默认值1

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

vue @click参数未定义

3 个答案: