Comment résoudre le problème selon lequel la valeur sélectionnée ne change pas après la modification de l'attribut calculé dans VUE-js tutoriel-php.cn

Comment résoudre le problème selon lequel la valeur sélectionnée ne change pas après la modification de l'attribut calculé dans VUE

php中世界最好的语言

Libérer： 2018-04-12 13:54:42

original

3672 Les gens l'ont consulté

Cette fois, je vais vous présenter comment gérer la valeur sélectionnée qui ne change pas après avoir modifié l'attribut calculé dans VUE Comment gérer la valeur sélectionnée qui ne change pas après. changer l'attribut calculé dans VUE Remarque Quels sont les problèmes Ci-dessous, jetons un coup d'œil.

Entrez d'abord le code :

//...
<body>
  <p id="qwe">
    <select v-model="selected">
      <option v-for="item in da" :value="item.value">{{item.value}}</option>
    </select>
    <span>{{selected}}</span>
  </p>
  <script>
    var dt = [{
      value: '111',
      label: 'aaa'
    }, {
      value: '222',
      label: 'bbb'
    }, {
      value: '333',
      label: 'ccc'
    }, {
      value: '444',
      label: 'ddd'
    }, {
      value: '555',
      label: 'fff'
    }];
    var vm = new Vue({
      el: '#qwe',
      data: {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        selected: ''
      },
      computed: {
        da: function () {
          var _self = this;
          return _self.options.filter(function (item) {
            return +item.value.split('')[2] > 2;
          });
        }
      }
    })
  </script>
</body>
</html>

Copier après la connexion

Le code ci-dessus utilise l'instruction v-for de Vue pour lier les données afin de générer des options. Cependant, alors que j'apprenais à écrire aujourd'hui, j'ai soudainement découvert un problème, qui consiste à lier l'attribut calculé da à l'instruction v-for, puis à le remplacer. les options des données sources. Le résultat est da. Les propriétés calculées sont correctes, mais les propriétés sélectionnées n'ont pas changé. C'est-à-dire que le texte de la zone déroulante sur la page ne change pas lorsqu'il n'est pas développé, comme indiqué ci-dessous :

Ici, vous pouvez voir que l'option de la liste déroulante a été mise à jour, mais l'attribut sélectionné n'a pas été mis à jour de manière synchrone car il met en cache la dernière valeur sélectionnée.

Je ne sais pas si le design ici est raisonnable, car je l'utilise rarement de cette façon.

Mais s’il y a des problèmes, il faut les résoudre. Ajoutez selected='' aux attributs calculés dans calculé et réinitialisez l'attribut sélectionné à chaque fois que la dépendance est mise à jour.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

AjaxUpLoad.js pour le téléchargement de fichiers

Comment utiliser le composant carrousel de Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!