时间戳

首页 > 解决方案 > 无法将选中的单选值重置为默认值（Vue js）

vue.js - 无法将选中的单选值重置为默认值（Vue js）

问题描述

默认情况下，我使用本地取货选项，值为1。当用户更改为免费送货时，会出现一些情况：如果邮政编码有效，则将更改为免费送货，否则将显示警报消息和本地将再次检查取件。问题是，如果邮政编码不合适，我可以将默认交付值设置为 1。但收音机显示选中的选项为 2。

<label v-for="(del, index) in delivery" :key="index">
    <input type="radio" name="del" :value="del.value" v-model="defaultDelivery" @change="changeDelivery(del.value)">{{ del.label }}
</label>


export default {
    data () {
        return {
            delivery: [
                {value: 1, label: 'Local pickup'},
                {value: 2, label: 'Free Delivery'}
            ],
            accepted_zips: [
              12345,
              12346
            ],
            defaultDelivery: 1,
            zip_code: 78745
        }
    },
    changeDelivery: function(val) {
        if(val == 2 && !this.accepted_zips.includes(this.zip_code))
        {
            this.defaultDelivery = 1 //it should set 1 as checked again! But it is not aplied
            alert('Sorry but currently we don't cover your area.')
        }
    },

标签： vue.js

解决方案

请注意，“不要”中的撇号正在关闭您的字符串，并且您没有将方法放在一个methods部分中。纠正这一点，你的代码对我来说很好。

new Vue({
  el: '#app',
  data() {
    return {
      delivery: [{
          value: 1,
          label: 'Local pickup'
        },
        {
          value: 2,
          label: 'Free Delivery'
        }
      ],
      accepted_zips: [
        12345,
        12346
      ],
      defaultDelivery: 1,
      zip_code: 78745
    };
  },
  methods: {
    changeDelivery(val) {
      if (val == 2 && !this.accepted_zips.includes(+this.zip_code)) {
        this.defaultDelivery = 1 //it should set 1 as checked again! But it is not aplied
        alert('Sorry but currently we don\'t cover your area.')
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>ZIP code <input v-model="zip_code"></div>
  <label v-for="(del, index) in delivery" :key="index">
    <input type="radio" name="del" :value="del.value" v-model="defaultDelivery" @change="changeDelivery(del.value)">{{ del.label }}
</label>
</div>

推荐阅读