html - 使用复选框导出 VueJS 呈现的 HTML 无法保留选中状态

Question

我的组件模板包含以下复选框代码:

<div ref="htmlData">
    <input 
        type="checkbox" 
        class="mycb" 
        :id="uniqID" 
        :disabled="disabled"
        v-model="cbvalue"
    >
</div>

(为简单起见删除了部分)。

我需要用这个模板(在服务器上)创建一个 PDF。这就是我在代码中所做的:

methods : {
    save () {
        let saveData = {
              'html': this.$refs.htmlData.innerHTML 
            };
        this.$http.post('/api/save',saveData);
    }
}

但是，保存的 HTML 不包含复选框状态，因此它总是保存未选中的复选框。

这是一个稍微修改过的 jsfiddle .

我的问题是:如何在呈现的 HTML 中捕获复选框状态？

我尝试添加 :checked="cbvalue" 属性 - 没有成功

Answer 1

看起来没有办法绑定(bind)输入的 checked 属性； Vue 通过属性做所有事情。 (作为引用，属性是内部状态，属性是在 HTML 中显示的内容。)

要获取反射(reflect)属性的属性，可以添加一点指令。

var demo = new Vue({
  el: '#demo',
  data: () => ({
    val: false
  }),
  methods: {
    save() {
      console.log(this.$refs.main.innerHTML);
    }
  },
  directives: {
    explicitChecked: {
      update(el) {
        if (el.checked) {
          el.setAttribute('checked', 'checked');
        } else {
          el.removeAttribute('checked');
        }
      }
    }
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="demo">
  <button @click="save">save</button>
  <div ref="main">
    <input type="checkbox" v-model="val" v-explicit-checked>
  </div>
</div>