javascript - The value of data in vue cannot be changed

Question

The name value and long value of my alert in created are correct, why is the value of name in choose undefined, and the long and short values ​​changed in created are true, but they are still false on the page

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

No matter what the value of the passed name is, the long and short in the page are 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

The logic of your code looks very confusing. There is a page jump in the click event. I haven’t seen your definition of that, nor have I seen it in this.shop. Please check carefully step by step.