Question

我正在创建编辑表单页面，我在加载页面之前运行它

beforeMount(){
    if(this.$route.meta.mode === 'edit'){
        this.initialize = '/api/artikel/edit/' + this.$route.params.id;
        this.store = '/api/artikel/update/' + this.$route.params.id;
        this.method = 'put';
    }
    this.fetchData();
},

并且在我的fetchData（）方法中，我只是转到服务器并将相应的数据检索到我的文章ID。

fetchData(){
    var vm = this
    axios.get(this.initialize)
        .then(function(response){
            Vue.set(vm.$data, 'form', response.data.form);
            Vue.set(vm.$data, 'rules', response.data.rules);
            Vue.set(vm.$data, 'option', response.data.option);
        })
        .catch(function(error){
        })
},

然后在我的表单中我只是将我的表单数据绑定到我的输入，它在输入文本中工作得很好，但在其他方面没有像在这个问题中输入单选按钮

<div class="form-group">
    <h5>Publish:</h5>
    <label class="radio-inline">
        <input type="radio" name="publish" class="styled" value="1" v-model="form.publish">
        Yes
    </label>
    <label class="radio-inline">
        <input type="radio" name="publish" class="styled" value="0" v-model="form.publish">
        No
    </label>
</div>

它应该根据数据库中的值自动检查单选按钮...但在我的情况下，没有一个检查..但是当我通过点击它检查manualy ...我看到使用form.publish值根据我使用chrome中的vuejs检查器检查的单选按钮

进行更改

所以我哪里弄错了？

Answer 1

可能是值如何进入。由于您将值设置为0/1，单选按钮模型需要0或1值，而不是真/假，您能检查是否是这种情况？< / p>

看下面的剪辑，看看改变为什么

new Vue({
  el: '#app',
  data: {
    form: {}
  },
  methods: {
    update () {
      // does not work
      //var form = { publish: true } 
      // works
      var form = { publish: 1 } // <---- are you sure it's 1 and not true?
      this.$set(this, 'form', form);
    }
  },
  
  mounted() {
    console.log(this.form)
    setTimeout(this.update, 1000)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>

<div id="app">
  <div class="form-group">
      <h5>Publish:</h5>
      <label class="radio-inline">
          <input type="radio" name="publish" class="styled" value="1" v-model="form.publish">
          Yes
      </label>
      <label class="radio-inline">
          <input type="radio" name="publish" class="styled" value="0" v-model="form.publish">
          No
      </label>
  </div>
</div>

Vuejs单选按钮绑定输入

1 个答案: