vue 组件问题

Question

<template>
  <div class="position">
    <dl>
        <dt id="view">热门职位</dt>
            <dd v-for="(item,index) of info" v-bind:key=item.id>
                <div>
                    <a class="react" :href="'/jobs/' + item.id" @click="retive(index)">
                        <div class="img">
                            <img :src="item.image" style="width:5rem;height: 4rem; border-radius: 0.4rem;">
                        </div>
                        <div class="dealcard">
                            <div class="dealcard-title">
                                {{item.title}}
                            </div>
                            <div class="dealcard-year">
                                {{item.keyword}}
                            </div>
                            <div class="dealcard-Salary">
                                {{item.salary}}
                            </div>
                        </div>
                        <div class="react-button">
                            <div class="description" v-if="item.stop!=='red'"
                                 style="background-color: #ff9a34; border:0.5px solid #ff8806;"><span>日结</span>
                            </div>
                            <div class="description" v-else
                                 style="background-color: #859199;border:0.5px solid #859199;"><span>停招</span></div>
                            <div class="price"><span>{{item.price}}</span></div>
                        </div>
                    </a>
                </div>
            </dd>
    </dl>
</div>
</template>

<script>
export default {
    data () {
        return {
            dic:"",
            index:"",
            info: "",
            style:true
        }
        },
      mounted() {
        axios
            .get('http://127.0.0.1:8000/jobs/')
            .then(response => (this.info = response["data"]["results"]))

    },
   methods: {
    retive: function (index) {
      this.index=index;
      this.dic = this.info[1];
      this.style = false

    }
  }

}
</script>

vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "info" 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
新手怎麽解决这个问题

Answer 1

info是一个列表。初始值应该是一个空数组[]。

Answer 2

data初始化数据里面，info改为[]数组而不是“”字符串

Answer 3

<a class="react" :href="'/jobs/' + item.id" @click="retive(index)">

语法有错误 a标签点击默认行为

我刚做了一个demo，info获取数据展示没问题 （你要实现什么功能，应该是点击有别的错误）

info 的数据类型
pic的数据类型

http://jsrun.net/yEXKp/edit