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

 第一页{{long}} 
 
 第二页{{short}} 

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; } }, }