Home >Web Front-end >JS Tutorial >How to deal with the problem that the selected value does not change after changing the calculated attribute in VUE

How to deal with the problem that the selected value does not change after changing the calculated attribute in VUE

php中世界最好的语言Original: 2018-04-12 13:54:423667browse

This time I will bring you how to handle the select value that does not change after changing the calculated attribute in VUE. Note that the selected value does not change after changing the calculated attribute in VUE. What are the matters? Below are practical cases. Let’s take a look.

First enter the 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>

The above code uses vue's v-for instruction to bind data to generate options. However, when I was learning to write today, I suddenly discovered a problem, which is to bind the calculated attribute da to the v-for instruction, and then replace the source data options. The result is da The calculated properties are correct, but the selected properties have not changed. That is to say, the text of the drop-down box on the page does not change when it is not expanded, as shown below:

Here you can see that the option of the drop-down box has

been updated , but the selected attribute has not been updated synchronously because it caches the last selected value.

I don’t know if the design here is reasonable, because I rarely use it this way.

But if there are problems, they must be solved. Add

selected='' to the calculated attribute in computed, and reset the selected attribute every time the dependency is updated.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to deal with the problem that the selected value does not change after changing the calculated attribute in VUE

Related articles