javascript - La valeur des données dans Vue ne peut pas être modifiée

Question

La valeur du nom et la valeur longue de l'alerte dans la création sont toutes deux correctes. Pourquoi la valeur du nom dans le choix n'est-elle pas définie, et les valeurs longues et courtes modifiées dans la création sont vraies, mais elles sont toujours fausses sur la 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>
            

Peu importe la valeur du nom transmis, les long et court de la page sont faux

 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

La logique de votre code semble très déroutante. Il y a un saut de page dans l'événement de clic. Je n'ai pas vu votre définition de cela, et je ne l'ai pas vue non plus dans cette boutique. Veuillez vérifier attentivement étape par étape.