Vuejs单选按钮绑定输入

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>

它应该根据数据库中的值自动检入单选按钮...但在我的情况下，它们都没有检查..但是当我通过单击它手动检查...我看到使用 form.publish 值根据我在 chrome 中使用 vuejs 检查器检查的单选按钮进行更改

那么我哪里弄错了？

Answer 1

好吧，我的错……这不是 vue.js 的问题，而是因为我使用 uniform.js 来设置我在 themeforest 中购买的管理模板的单选按钮样式，但他们没有提供清晰的文档...

在四处搜索之后，我发现我的单选按钮样式的 javascript 和 css 是由 uniform.js 编写的，我只是添加了一个 jquery 代码来运行更新单选按钮

Answer 2

可能与值的输入方式有关。因为您将值设置为 0/1，所以单选按钮模型需要 0 或 1 值，而不是真/假，您能检查一下是否是这种情况吗？

看看下面的截图，看看更改为 true 会发生什么

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>