vue implémente la méthode select sans changer la valeur sélectionnée-js tutoriel-php.cn

vue implémente la méthode select sans changer la valeur sélectionnée

小云云

Libérer： 2018-03-03 11:02:08

original

4319 Les gens l'ont consulté

Cet article partage principalement avec vous un article pour résoudre le problème selon lequel la valeur sélectionnée ne change pas après avoir modifié l'attribut calculé dans Vue. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Commençons par 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, mais j'ai soudainement découvert un problème lorsque j'apprenais à écrire aujourd'hui. Autrement dit, liez l'attribut calculé da à l'instruction v-for, puis remplacez les options de données source. Par conséquent, l'attribut calculé da est correct, mais l'attribut sélectionné n'a pas changé. C'est-à-dire que le texte de la liste déroulante sur la page n'a pas changé lorsqu'il n'est pas développé, comme indiqué ci-dessous :

Ici, vous pouvez voyez que l'option de la liste déroulante a été mise à jour. Cependant, l'attribut sélectionné n'est pas 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='' à l'attribut calculé dans calculé et réinitialisez l'attribut sélectionné à chaque fois que la dépendance est mise à jour.

Recommandations associées :

jQuery récupère la valeur sélectionnée et efface le statut sélectionné

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!