javascript - vue中data的值改变不了

Question

我在created中alert的name值和long值都是正确的，为什么在chose中name的值就是undefined，而且在created中改变了的long和short值为true，在页面中还是false

            <li v-bind:class={active:long}  @click='chose'>
                <router-link to='/long'>第一页{{long}}</router-link>
            </li>
            <li v-bind:class={active:short}>
                <router-link to='/short'>第二页{{short}}</router-link>

            </li>
            

不管传过来的name是什么值，页面中的long和short都是false

 import Vue from 'vue';
    export default  {
      props: ['name'],
      data() {
            return {             
                long:false,
                short:false,

            }
        },
        methods:{

            chose(){
                console.log(this.name);//这里输出undefined
                console.log(this.short);
            }

        },
        created(){
           var name=this.name;
           console.log(name);//这里值是正确的
           switch (name){
              case "long":
                   this.long=true;
                   alert(that.long+"long");//当name值为long时弹出true
                   break;
               case "short":
                   alert(name);
                   this.short=true;
                   break;
              
           }
        },


    }

Answer 1

你这代码看着逻辑很混乱，点击事件里面有页面跳转。that还没有看见你定义，this.shop也没见到，一步步认真检查下。